Fix loader

BrunoQuaresma · BrunoQuaresma · commit 79758dab2982 · 2022-06-02T18:04:19.000Z
diff --git a/site/src/components/WorkspaceBuildLogs/WorkspaceBuildLogs.stories.tsx b/site/src/components/WorkspaceBuildLogs/WorkspaceBuildLogs.stories.tsx
@@ -17,5 +17,5 @@ Example.args = {
 export const Loading = Template.bind({})
 Loading.args = {
   logs: MockWorkspaceBuildLogs,
-  isLoading: true,
+  isWaitingForLogs: true,
 }
diff --git a/site/src/components/WorkspaceBuildLogs/WorkspaceBuildLogs.tsx b/site/src/components/WorkspaceBuildLogs/WorkspaceBuildLogs.tsx
@@ -36,10 +36,10 @@ const getStageDurationInSeconds = (logs: ProvisionerJobLog[]) => {
 
 export interface WorkspaceBuildLogsProps {
   logs: ProvisionerJobLog[]
-  isLoading: boolean
+  isWaitingForLogs: boolean
 }
 
-export const WorkspaceBuildLogs: FC<WorkspaceBuildLogsProps> = ({ logs, isLoading }) => {
+export const WorkspaceBuildLogs: FC<WorkspaceBuildLogsProps> = ({ logs, isWaitingForLogs }) => {
   const groupedLogsByStage = groupLogsByStage(logs)
   const stages = Object.keys(groupedLogsByStage)
   const styles = useStyles()
@@ -55,8 +55,8 @@ export const WorkspaceBuildLogs: FC<WorkspaceBuildLogsProps> = ({ logs, isLoadin
         }))
         const duration = getStageDurationInSeconds(logs)
         const isLastStage = stageIndex === stages.length - 1
-        const shouldDisplaySpinner = isLoading && isLastStage
-        const shouldDisplayDuration = !isLoading && duration
+        const shouldDisplaySpinner = isWaitingForLogs && isLastStage
+        const shouldDisplayDuration = !isWaitingForLogs && duration
 
         return (
           <div key={stage}>
diff --git a/site/src/pages/WorkspaceBuildPage/WorkspaceBuildPage.tsx b/site/src/pages/WorkspaceBuildPage/WorkspaceBuildPage.tsx
@@ -4,6 +4,7 @@ import { useMachine } from "@xstate/react"
 import { FC } from "react"
 import { useParams } from "react-router-dom"
 import { ProvisionerJobLog } from "../../api/typesGenerated"
+import { Loader } from "../../components/Loader/Loader"
 import { Margins } from "../../components/Margins/Margins"
 import { Stack } from "../../components/Stack/Stack"
 import { WorkspaceBuildLogs } from "../../components/WorkspaceBuildLogs/WorkspaceBuildLogs"
@@ -27,9 +28,9 @@ const useBuildId = () => {
 export const WorkspaceBuildPage: FC = () => {
   const buildId = useBuildId()
   // We can initialize logs as an empty array because it will be a stream
-  const [buildState] = useMachine(workspaceBuildMachine, { context: { buildId, logs: [] } })
+  const [buildState] = useMachine(workspaceBuildMachine, { context: { buildId } })
   const { logs, build } = buildState.context
-  const isLoading = !buildState.matches("loaded")
+  const isWaitingForLogs = !buildState.matches("logs.loaded")
   const styles = useStyles()
 
   return (
@@ -40,7 +41,8 @@ export const WorkspaceBuildPage: FC = () => {
         </Typography>
 
         {build && <WorkspaceBuildStats build={build} />}
-        <WorkspaceBuildLogs logs={sortLogsByCreatedAt(logs)} isLoading={isLoading} />
+        {!logs && <Loader />}
+        {logs && <WorkspaceBuildLogs logs={sortLogsByCreatedAt(logs)} isWaitingForLogs={isWaitingForLogs} />}
       </Stack>
     </Margins>
   )
diff --git a/site/src/xServices/workspaceBuild/workspaceBuildXService.ts b/site/src/xServices/workspaceBuild/workspaceBuildXService.ts
@@ -8,7 +8,7 @@ type LogsContext = {
   build?: WorkspaceBuild
   getBuildError?: Error | unknown
   // Logs
-  logs: ProvisionerJobLog[]
+  logs?: ProvisionerJobLog[]
 }
 
 type LogsEvent =
@@ -78,19 +78,19 @@ export const workspaceBuildMachine = createMachine(
               src: "streamWorkspaceBuildLogs",
             },
           },
+          loaded: {
+            type: "final",
+          },
         },
         on: {
           ADD_LOG: {
             actions: "addLog",
           },
           NO_MORE_LOGS: {
-            target: "loaded",
+            target: "logs.loaded",
           },
         },
       },
-      loaded: {
-        type: "final",
-      },
     },
   },
   {
@@ -110,7 +110,10 @@ export const workspaceBuildMachine = createMachine(
         logs: (_, event) => event.data,
       }),
       addLog: assign({
-        logs: (context, event) => [...context.logs, event.log],
+        logs: (context, event) => {
+          const previousLogs = context.logs ?? []
+          return [...previousLogs, event.log]
+        },
       }),
     },
     services: {

Original file line number	Diff line number	Diff line change
`@@ -17,5 +17,5 @@ Example.args = {`
`17`	`17`	`export const Loading = Template.bind({})`
`18`	`18`	`Loading.args = {`
`19`	`19`	`logs: MockWorkspaceBuildLogs,`
`20`		`- isLoading: true,`
	`20`	`+ isWaitingForLogs: true,`
`21`	`21`	`}`