diff --git a/workspaces/orchestrator/.changeset/activetext-retrigger-loading-indicator.md b/workspaces/orchestrator/.changeset/activetext-retrigger-loading-indicator.md new file mode 100644 index 0000000000..1c31979aa0 --- /dev/null +++ b/workspaces/orchestrator/.changeset/activetext-retrigger-loading-indicator.md @@ -0,0 +1,5 @@ +--- +'@red-hat-developer-hub/backstage-plugin-orchestrator-form-widgets': patch +--- + +Clarify ActiveText retrigger loading by showing a spinner while dependencies resolve. diff --git a/workspaces/orchestrator/plugins/orchestrator-form-widgets/src/utils/useFetchAndEvaluate.ts b/workspaces/orchestrator/plugins/orchestrator-form-widgets/src/utils/useFetchAndEvaluate.ts index 7beeb22007..c432bb7e1d 100644 --- a/workspaces/orchestrator/plugins/orchestrator-form-widgets/src/utils/useFetchAndEvaluate.ts +++ b/workspaces/orchestrator/plugins/orchestrator-form-widgets/src/utils/useFetchAndEvaluate.ts @@ -34,11 +34,23 @@ export const useFetchAndEvaluate = ( handleFetchEnded?: () => void, ) => { const unitEvaluator = useTemplateUnitEvaluator(); + const hasFetchUrl = !!uiProps['fetch:url']; + const hasRetrigger = + Array.isArray(uiProps['fetch:retrigger']) && + uiProps['fetch:retrigger'].length > 0; const retrigger = useRetriggerEvaluate( unitEvaluator, formData, uiProps['fetch:retrigger'] as string[], ); + const retriggerSatisfied = + !hasRetrigger || + (!!retrigger && + retrigger.every( + value => value !== undefined && value !== null && value !== '', + )); + const waitingForRetrigger = + hasFetchUrl && hasRetrigger && !retriggerSatisfied; const { data, error: fetchError, @@ -50,7 +62,7 @@ export const useFetchAndEvaluate = ( useDebounce( () => { const evaluate = async () => { - if (!retrigger || fetchLoading || fetchError) { + if (!retrigger || fetchLoading || fetchError || waitingForRetrigger) { return; } try { @@ -82,6 +94,7 @@ export const useFetchAndEvaluate = ( retrigger, fetchError, fetchLoading, + waitingForRetrigger, fieldId, data, formData, @@ -108,6 +121,7 @@ export const useFetchAndEvaluate = ( return { text: resultText, loading: completeLoading, + waitingForRetrigger, error: error ?? fetchError, }; }; diff --git a/workspaces/orchestrator/plugins/orchestrator-form-widgets/src/widgets/ActiveText.tsx b/workspaces/orchestrator/plugins/orchestrator-form-widgets/src/widgets/ActiveText.tsx index 16d2bd25e7..73fab78019 100644 --- a/workspaces/orchestrator/plugins/orchestrator-form-widgets/src/widgets/ActiveText.tsx +++ b/workspaces/orchestrator/plugins/orchestrator-form-widgets/src/widgets/ActiveText.tsx @@ -37,7 +37,7 @@ export const ActiveText: Widget< const handleFetchStarted = formContext?.handleFetchStarted; const handleFetchEnded = formContext?.handleFetchEnded; - const { text, error, loading } = useFetchAndEvaluate( + const { text, error, loading, waitingForRetrigger } = useFetchAndEvaluate( uiProps['ui:text'] ?? '', formData ?? {}, uiProps, @@ -59,13 +59,14 @@ export const ActiveText: Widget< return ; } - return ( - - {loading ? ( - - ) : ( - - )} - - ); + let content: React.ReactNode; + if (waitingForRetrigger) { + content = ; + } else if (loading) { + content = ; + } else { + content = ; + } + + return {content}; };