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};
};