Add loading indicator

BrunoQuaresma · BrunoQuaresma · commit 600d5bf7ec30 · 2022-06-02T17:49:13.000Z
diff --git a/site/src/components/WorkspaceBuildLogs/WorkspaceBuildLogs.stories.tsx b/site/src/components/WorkspaceBuildLogs/WorkspaceBuildLogs.stories.tsx
@@ -13,3 +13,9 @@ export const Example = Template.bind({})
 Example.args = {
   logs: MockWorkspaceBuildLogs,
 }
+
+export const Loading = Template.bind({})
+Loading.args = {
+  logs: MockWorkspaceBuildLogs,
+  isLoading: true,
+}
diff --git a/site/src/components/WorkspaceBuildLogs/WorkspaceBuildLogs.tsx b/site/src/components/WorkspaceBuildLogs/WorkspaceBuildLogs.tsx
@@ -1,3 +1,4 @@
+import CircularProgress from "@material-ui/core/CircularProgress"
 import { makeStyles } from "@material-ui/core/styles"
 import dayjs from "dayjs"
 import { FC } from "react"
@@ -35,29 +36,34 @@ const getStageDurationInSeconds = (logs: ProvisionerJobLog[]) => {
 
 export interface WorkspaceBuildLogsProps {
   logs: ProvisionerJobLog[]
+  isLoading: boolean
 }
 
-export const WorkspaceBuildLogs: FC<WorkspaceBuildLogsProps> = ({ logs }) => {
+export const WorkspaceBuildLogs: FC<WorkspaceBuildLogsProps> = ({ logs, isLoading }) => {
   const groupedLogsByStage = groupLogsByStage(logs)
   const stages = Object.keys(groupedLogsByStage)
   const styles = useStyles()
 
   return (
     <div className={styles.logs}>
-      {stages.map((stage) => {
+      {stages.map((stage, stageIndex) => {
         const logs = groupedLogsByStage[stage]
         const isEmpty = logs.every((log) => log.output === "")
         const lines = logs.map((log) => ({
           time: log.created_at,
           output: log.output,
         }))
         const duration = getStageDurationInSeconds(logs)
+        const isLastStage = stageIndex === stages.length - 1
+        const shouldDisplaySpinner = isLoading && isLastStage
+        const shouldDisplayDuration = !isLoading && duration
 
         return (
           <div key={stage}>
             <div className={styles.header}>
               <div>{stage}</div>
-              {duration && <div className={styles.duration}>{duration} seconds</div>}
+              {shouldDisplaySpinner && <CircularProgress size={14} className={styles.spinner} />}
+              {shouldDisplayDuration && <div className={styles.duration}>{duration} seconds</div>}
             </div>
             {!isEmpty && <Logs lines={lines} className={styles.codeBlock} />}
           </div>
@@ -78,6 +84,7 @@ const useStyles = makeStyles((theme) => ({
     fontSize: theme.typography.body1.fontSize,
     padding: theme.spacing(2),
     paddingLeft: theme.spacing(4),
+    paddingRight: theme.spacing(4),
     borderBottom: `1px solid ${theme.palette.divider}`,
     backgroundColor: theme.palette.background.paper,
     display: "flex",
@@ -94,4 +101,8 @@ const useStyles = makeStyles((theme) => ({
     padding: theme.spacing(2),
     paddingLeft: theme.spacing(4),
   },
+
+  spinner: {
+    marginLeft: "auto",
+  },
 }))
diff --git a/site/src/pages/WorkspaceBuildPage/WorkspaceBuildPage.tsx b/site/src/pages/WorkspaceBuildPage/WorkspaceBuildPage.tsx
@@ -4,7 +4,6 @@ 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,8 +26,10 @@ const useBuildId = () => {
 
 export const WorkspaceBuildPage: FC = () => {
   const buildId = useBuildId()
-  const [buildState] = useMachine(workspaceBuildMachine, { context: { buildId } })
+  // We can initialize logs as an empty array because it will be a stream
+  const [buildState] = useMachine(workspaceBuildMachine, { context: { buildId, logs: [] } })
   const { logs, build } = buildState.context
+  const isLoading = !buildState.matches("loaded")
   const styles = useStyles()
 
   return (
@@ -39,8 +40,7 @@ export const WorkspaceBuildPage: FC = () => {
         </Typography>
 
         {build && <WorkspaceBuildStats build={build} />}
-        {!logs && <Loader />}
-        {logs && <WorkspaceBuildLogs logs={sortLogsByCreatedAt(logs)} />}
+        <WorkspaceBuildLogs logs={sortLogsByCreatedAt(logs)} isLoading={isLoading} />
       </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 =
@@ -110,10 +110,7 @@ export const workspaceBuildMachine = createMachine(
         logs: (_, event) => event.data,
       }),
       addLog: assign({
-        logs: (context, event) => {
-          const previousLogs = context.logs ?? []
-          return [...previousLogs, event.log]
-        },
+        logs: (context, event) => [...context.logs, event.log],
       }),
     },
     services: {
