Remove visual stutter

ammario · ammario · commit 6b21f00f7f93 · 2022-10-16T22:55:42.000Z
diff --git a/site/src/components/Workspace/Workspace.tsx b/site/src/components/Workspace/Workspace.tsx
@@ -20,7 +20,10 @@ import { WorkspaceSection } from "../WorkspaceSection/WorkspaceSection"
 import { WorkspaceStats } from "../WorkspaceStats/WorkspaceStats"
 import { AlertBanner } from "../AlertBanner/AlertBanner"
 import { useTranslation } from "react-i18next"
-import { WorkspaceBuildProgress } from "components/WorkspaceBuildProgress/WorkspaceBuildProgress"
+import {
+  EstimateTransitionTime,
+  WorkspaceBuildProgress,
+} from "components/WorkspaceBuildProgress/WorkspaceBuildProgress"
 
 export enum WorkspaceErrors {
   GET_RESOURCES_ERROR = "getResourcesError",
@@ -115,6 +118,15 @@ export const Workspace: FC<React.PropsWithChildren<WorkspaceProps>> = ({
     />
   )
 
+  let buildTimeEstimate: number | undefined = undefined
+  let isTransitioning: boolean | undefined = undefined
+  if (template !== undefined) {
+    ;[buildTimeEstimate, isTransitioning] = EstimateTransitionTime(
+      template,
+      workspace,
+    )
+  }
+
   return (
     <Margins>
       <PageHeader
@@ -186,7 +198,12 @@ export const Workspace: FC<React.PropsWithChildren<WorkspaceProps>> = ({
 
         <WorkspaceStats workspace={workspace} handleUpdate={handleUpdate} />
 
-        <WorkspaceBuildProgress workspace={workspace} template={template} />
+        {isTransitioning !== undefined && isTransitioning && (
+          <WorkspaceBuildProgress
+            workspace={workspace}
+            buildEstimate={buildTimeEstimate}
+          />
+        )}
 
         {typeof resources !== "undefined" && resources.length > 0 && (
           <Resources
diff --git a/site/src/components/WorkspaceBuildProgress/WorkspaceBuildProgress.stories.tsx b/site/src/components/WorkspaceBuildProgress/WorkspaceBuildProgress.stories.tsx
@@ -3,7 +3,6 @@ import dayjs from "dayjs"
 import {
   MockProvisionerJob,
   MockStartingWorkspace,
-  MockTemplate,
   MockWorkspaceBuild,
 } from "../../testHelpers/renderHelpers"
 import {
@@ -22,12 +21,7 @@ const Template: Story<WorkspaceBuildProgressProps> = (args) => (
 
 export const Starting = Template.bind({})
 Starting.args = {
-  template: {
-    ...MockTemplate,
-    build_time_stats: {
-      start_ms: 10000,
-    },
-  },
+  buildEstimate: 10000,
   workspace: {
     ...MockStartingWorkspace,
     latest_build: {
@@ -45,21 +39,11 @@ Starting.args = {
 export const StartingUnknown = Template.bind({})
 StartingUnknown.args = {
   ...Starting.args,
-  template: {
-    ...MockTemplate,
-    build_time_stats: {
-      start_ms: undefined,
-    },
-  },
+  buildEstimate: undefined,
 }
 
 export const StartingPassedEstimate = Template.bind({})
 StartingPassedEstimate.args = {
   ...Starting.args,
-  template: {
-    ...MockTemplate,
-    build_time_stats: {
-      start_ms: 1000,
-    },
-  },
+  buildEstimate: 1000,
 }
diff --git a/site/src/components/WorkspaceBuildProgress/WorkspaceBuildProgress.tsx b/site/src/components/WorkspaceBuildProgress/WorkspaceBuildProgress.tsx
@@ -2,17 +2,21 @@ import LinearProgress from "@material-ui/core/LinearProgress"
 import makeStyles from "@material-ui/core/styles/makeStyles"
 import { Template, Workspace } from "api/typesGenerated"
 import dayjs, { Dayjs } from "dayjs"
-import { FC } from "react"
+import { FC, useEffect, useState } from "react"
 import { MONOSPACE_FONT_FAMILY } from "theme/constants"
 
 import duration from "dayjs/plugin/duration"
+import { Transition } from "xstate"
 
 dayjs.extend(duration)
 
 const estimateFinish = (
   startedAt: Dayjs,
-  templateAverage: number,
+  templateAverage?: number,
 ): [number, string] => {
+  if (templateAverage === undefined) {
+    return [0, "Unknown"]
+  }
   const realPercentage = dayjs().diff(startedAt) / templateAverage
 
   // Showing a full bar is frustrating.
@@ -30,37 +34,49 @@ const estimateFinish = (
 
 export interface WorkspaceBuildProgressProps {
   workspace: Workspace
-  template?: Template
+  buildEstimate?: number
 }
 
-export const WorkspaceBuildProgress: FC<WorkspaceBuildProgressProps> = ({
-  workspace,
-  template,
-}) => {
-  const styles = useStyles()
-
-  // Template stats not loaded or non-existent
-  if (!template) {
-    return <></>
-  }
-
-  let buildEstimate: number | undefined = 0
+// EstimateTransitionTime gets the build estimate for the workspace,
+// if it is in a transition state.
+export const EstimateTransitionTime = (
+  template: Template,
+  workspace: Workspace,
+): [number | undefined, boolean] => {
   switch (workspace.latest_build.status) {
     case "starting":
-      buildEstimate = template.build_time_stats.start_ms
-      break
+      return [template.build_time_stats.start_ms, true]
     case "stopping":
-      buildEstimate = template.build_time_stats.stop_ms
-      break
+      return [template.build_time_stats.stop_ms, true]
     case "deleting":
-      buildEstimate = template.build_time_stats.delete_ms
-      break
+      return [template.build_time_stats.delete_ms, true]
     default:
       // Not in a transition state
-      return <></>
+      return [undefined, false]
   }
+}
+
+export const WorkspaceBuildProgress: FC<WorkspaceBuildProgressProps> = ({
+  workspace,
+  buildEstimate,
+}) => {
+  const styles = useStyles()
 
   const job = workspace.latest_build.job
+
+  const [progressValue, setProgressValue] = useState(0)
+  // By default workspace is updated every second, which can cause visual stutter
+  // when the build estimate is a few seconds. The timer ensures no observable
+  // stutter in all cases.
+  useEffect(() => {
+    const updateProgress = () => {
+      setProgressValue(
+        estimateFinish(dayjs(job.started_at), buildEstimate)[0] * 100,
+      )
+    }
+    setTimeout(updateProgress, 100)
+  }, [progressValue, job.started_at, buildEstimate])
+
   if (buildEstimate === undefined) {
     return (
       <div className={styles.stack}>
@@ -76,11 +92,7 @@ export const WorkspaceBuildProgress: FC<WorkspaceBuildProgressProps> = ({
   return (
     <div className={styles.stack}>
       <LinearProgress
-        value={
-          (job.status === "running" &&
-            estimateFinish(dayjs(job.started_at), buildEstimate)[0] * 100) ||
-          0
-        }
+        value={(job.status === "running" && progressValue) || 0}
         variant={job.status === "running" ? "determinate" : "indeterminate"}
       />
       <div className={styles.barHelpers}>
