site: minor build stats fixes (#4569)

- Correct variable used in the template stats summary
- Don't use dayjs.humanize (it thinks 30 seconds is "a few seconds")

site/src/components/TemplateStats/TemplateStats.tsx

@@ -46,7 +46,7 @@ export const TemplateStats: FC<TemplateStatsProps> = ({
         <span className={styles.statsLabel}>{Language.buildTimeLabel}</span>
 
         <span className={styles.statsValue}>
-          {formatTemplateBuildTime(template.active_user_count)}{" "}
+          {formatTemplateBuildTime(template.average_build_time_ms)}{" "}
         </span>
       </div>
       <div className={styles.statsDivider} />

site/src/components/WorkspaceBuildProgress/WorkspaceBuildProgress.tsx

@@ -18,18 +18,17 @@ const estimateFinish = (
   templateAverage *= 1.2
 
   const realPercentage = dayjs().diff(startedAt) / templateAverage
-  // Showing a full bar is frustrating.
-  const displayPercentage = Math.min(realPercentage, 0.95)
 
-  if (realPercentage > 1) {
-    return [displayPercentage, "Any moment now..."]
+  // Showing a full bar is frustrating.
+  if (realPercentage > 0.95) {
+    return [0.95, "Any moment now..."]
   }
 
   return [
-    displayPercentage,
-    `${dayjs
-      .duration((1 - realPercentage) * templateAverage)
-      .humanize()} remaining...`,
+    realPercentage,
+    `~${Math.ceil(
+      dayjs.duration((1 - realPercentage) * templateAverage).asSeconds(),
+    )} seconds remaining...`,
   ]
 }
 

site/src/util/templates.ts

@@ -16,5 +16,5 @@ export const formatTemplateActiveDevelopers = (num?: number): string => {
 export const formatTemplateBuildTime = (buildTimeMs: number): string => {
   return buildTimeMs < 0
     ? "Unknown"
-    : dayjs.duration(buildTimeMs, "milliseconds").humanize()
+    : `${Math.round(dayjs.duration(buildTimeMs, "milliseconds").asSeconds())}s`
 }