Provisioning: Fix rendering loop in FinishedJobStatus component (#109890)

Provisioning: Fix renderign loop in FinishedJobStatus component

public/app/features/provisioning/Job/FinishedJobStatus.tsx

@@ -36,6 +36,20 @@ export function FinishedJobStatus({ jobUid, repositoryName, jobType, onStatusCha
       }, 1000);
     }
 
+    if (retryFailed) {
+      onStatusChange?.({
+        status: 'error',
+        error: {
+          title: t('provisioning.job-status.no-job-found', 'No job found'),
+          message: t(
+            'provisioning.job-status.no-job-found-message',
+            'The job may have been deleted or could not be retrieved. Cancel the current process and start again.'
+          ),
+        },
+      });
+      return;
+    }
+
     if (finishedQuery.isSuccess && job?.status) {
       const { state, message, errors } = job.status;
 
@@ -70,21 +84,7 @@ export function FinishedJobStatus({ jobUid, repositoryName, jobType, onStatusCha
         clearTimeout(timeoutId);
       }
     };
-  }, [finishedQuery, job, onStatusChange]);
-
-  if (retryFailed) {
-    onStatusChange?.({
-      status: 'error',
-      error: {
-        title: t('provisioning.job-status.no-job-found', 'No job found'),
-        message: t(
-          'provisioning.job-status.no-job-found-message',
-          'The job may have been deleted or could not be retrieved. Cancel the current process and start again.'
-        ),
-      },
-    });
-    return null;
-  }
+  }, [finishedQuery, job, onStatusChange, retryFailed]);
 
   if (!job || finishedQuery.isLoading || finishedQuery.isFetching) {
     return (

public/app/features/provisioning/Job/JobContent.tsx

@@ -76,15 +76,13 @@ export function JobContent({ jobType, job, isFinishedJob = false, onStatusChange
     <Stack direction="column" gap={2}>
       <Stack direction="column" gap={2}>
         {['working', 'pending'].includes(state ?? '') && (
-          <Stack direction="row" alignItems="center" justifyContent="center" gap={2}>
-            <Spinner size={24} />
-            <Text element="h5" color="secondary">
-              {message ?? state ?? t('provisioning.job-status.starting', 'Starting...')}
-            </Text>
-          </Stack>
-        )}
-        {state && !['success', 'error'].includes(state) && (
-          <Stack direction="row" alignItems="center" justifyContent="center" gap={2}>
+          <Stack direction="column" alignItems="center">
+            <Stack direction="row" alignItems="center" justifyContent="center" gap={2}>
+              <Spinner size={24} />
+              <Text element="h5" color="secondary">
+                {message ?? state ?? t('provisioning.job-status.starting', 'Starting...')}
+              </Text>
+            </Stack>
             <ProgressBar progress={progress ?? 0} />
           </Stack>
         )}