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 00000000000..1c31979aa07 --- /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 bd37174467f..c9dc00ea66d 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, 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 78a09c8b9d9..361738f0417 100644 --- a/workspaces/orchestrator/plugins/orchestrator-form-widgets/src/widgets/ActiveText.tsx +++ b/workspaces/orchestrator/plugins/orchestrator-form-widgets/src/widgets/ActiveText.tsx @@ -37,14 +37,15 @@ export const ActiveText: Widget< const handleFetchStarted = formContext?.handleFetchStarted; const handleFetchEnded = formContext?.handleFetchEnded; - const { text, error, fetchError, loading } = useFetchAndEvaluate( - uiProps['ui:text'] ?? '', - formData ?? {}, - uiProps, - id, - handleFetchStarted, - handleFetchEnded, - ); + const { text, error, fetchError, loading, waitingForRetrigger } = + useFetchAndEvaluate( + uiProps['ui:text'] ?? '', + formData ?? {}, + uiProps, + id, + handleFetchStarted, + handleFetchEnded, + ); if (!uiProps['ui:text']) { return ( @@ -60,13 +61,14 @@ export const ActiveText: Widget< return ; } - return ( - - {loading ? ( - - ) : ( - - )} - - ); + let content: React.ReactNode; + if (waitingForRetrigger) { + content = ; + } else if (loading) { + content = ; + } else { + content = ; + } + + return {content}; };