Merge pull request #31290 from backstage/blam/smol-hooks

`scaffolder-react`: Don't mark as finished loading until we've actually hit the event stream

.changeset/curvy-bobcats-melt.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-scaffolder-react': patch
+---
+
+Don't change loading to false until we've actually got some log state

plugins/scaffolder-react/report.api.md

@@ -354,7 +354,7 @@ export type ScaffolderScaffoldResponse = ScaffolderScaffoldResponse_2;
 // @public
 export type ScaffolderStep = {
   id: string;
-  status: ScaffolderTaskStatus;
+  status: ScaffolderTaskStatus_2;
   endedAt?: string;
   startedAt?: string;
 };
@@ -398,11 +398,11 @@ export type TaskStream = {
     [stepId in string]: string[];
   };
   completed: boolean;
-  task?: ScaffolderTask;
+  task?: ScaffolderTask_2;
   steps: {
     [stepId in string]: ScaffolderStep;
   };
-  output?: ScaffolderTaskOutput;
+  output?: ScaffolderTaskOutput_2;
 };
 
 // @public @deprecated

plugins/scaffolder-react/src/hooks/useEventStream.ts

@@ -19,12 +19,12 @@ import { useEffect } from 'react';
 import { useApi } from '@backstage/core-plugin-api';
 import { Subscription } from '@backstage/types';
 import {
-  LogEvent,
-  scaffolderApiRef,
-  ScaffolderTask,
-  ScaffolderTaskOutput,
   ScaffolderTaskStatus,
-} from '../api';
+  ScaffolderTaskOutput,
+  ScaffolderTask,
+  LogEvent,
+} from '@backstage/plugin-scaffolder-common';
+import { scaffolderApiRef } from '../api';
 
 /**
  * The status of the step being processed
@@ -85,7 +85,6 @@ function reducer(draft: TaskStream, action: ReducerAction) {
         current[next.id] = [];
         return current;
       }, {} as { [stepId in string]: string[] });
-      draft.loading = false;
       draft.error = undefined;
       draft.completed = false;
       draft.task = action.data;
@@ -96,6 +95,12 @@ function reducer(draft: TaskStream, action: ReducerAction) {
       const entries = action.data;
       const logLines = [];
 
+      // only set loading as false once we have logs,
+      // otherwise things flicker from pending to loaded.
+      if (draft.loading && entries.length > 0) {
+        draft.loading = false;
+      }
+
       for (const entry of entries) {
         const logLine = `${entry.createdAt} ${entry.body.message}`;
         logLines.push(logLine);