Merge pull request #34843 from overleaf/bg-add-compile-timer

add timer for compile with checkpoints

GitOrigin-RevId: ec758d34594f242a5cac8192233bfe2db783e42a

services/web/frontend/js/features/pdf-preview/components/pdf-compile-time.tsx

@@ -0,0 +1,61 @@
+import { memo, useEffect, useRef, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useDetachCompileContext } from '@/shared/context/detach-compile-context'
+import MaterialIcon from '@/shared/components/material-icon'
+import OLTooltip from '@/shared/components/ol/ol-tooltip'
+
+function PdfCompileTime() {
+  const { t } = useTranslation()
+  const { compiling, deliveryLatencies } = useDetachCompileContext()
+
+  const startRef = useRef<number | null>(null)
+  const [elapsedMs, setElapsedMs] = useState<number | null>(null)
+
+  useEffect(() => {
+    if (!compiling) {
+      startRef.current = null
+      return
+    }
+    startRef.current = performance.now()
+    setElapsedMs(0)
+    const intervalId = window.setInterval(() => {
+      if (startRef.current !== null) {
+        setElapsedMs(performance.now() - startRef.current)
+      }
+    }, 100)
+    return () => {
+      window.clearInterval(intervalId)
+    }
+  }, [compiling])
+
+  const ms = compiling
+    ? (elapsedMs ?? 0)
+    : deliveryLatencies?.compileTimeClientE2E
+  if (ms == null) {
+    return null
+  }
+
+  const seconds = (ms / 1000).toFixed(1)
+
+  return (
+    <OLTooltip
+      id="pdf-compile-time"
+      description={t('last_compile_duration', { seconds })}
+      overlayProps={{ placement: 'bottom' }}
+    >
+      <span
+        className="toolbar-pdf-compile-time"
+        aria-label={t('last_compile_duration', { seconds })}
+      >
+        {compiling ? (
+          <MaterialIcon type="hourglass_top" />
+        ) : (
+          <MaterialIcon type="timer" />
+        )}
+        <span>{seconds} s</span>
+      </span>
+    </OLTooltip>
+  )
+}
+
+export default memo(PdfCompileTime)

services/web/frontend/js/features/pdf-preview/components/pdf-preview-hybrid-toolbar.tsx

@@ -3,6 +3,7 @@ import { memo } from 'react'
 import { useTranslation } from 'react-i18next'
 import OLButtonToolbar from '@/shared/components/ol/ol-button-toolbar'
 import PdfCompileButton from '@/features/pdf-preview/components/pdf-compile-button'
+import PdfCompileTime from '@/features/pdf-preview/components/pdf-compile-time'
 import PdfHybridDownloadButton from '@/features/pdf-preview/components/pdf-hybrid-download-button'
 import { DetachedSynctexControl } from '@/features/pdf-preview/components/detach-synctex-control'
 import SwitchToEditorButton from '@/features/pdf-preview/components/switch-to-editor-button'
@@ -10,6 +11,7 @@ import PdfHybridLogsButton from '@/features/pdf-preview/components/pdf-hybrid-lo
 import PdfPreviewHybridToolbarOrphanRefreshInner from './pdf-preview-hybrid-toolbar-orphan-refresh-inner'
 import PdfPreviewHybridToolbarConnectingInner from './pdf-preview-hybrid-toolbar-connecting-inner'
 import useDetachedOrphanDetection from '../hooks/use-detached-orphan-detection'
+import { useFeatureFlag } from '@/shared/context/split-test-context'
 
 function PdfPreviewHybridToolbar() {
   const { t } = useTranslation()
@@ -36,12 +38,15 @@ function PdfPreviewHybridToolbar() {
 
 function PdfPreviewHybridToolbarInner() {
   const { focusMode } = useLayoutContext()
+  const showCompileTimer = useFeatureFlag('compile-with-checkpoint')
+
   return (
     <>
       <div className="toolbar-pdf-left">
         <PdfCompileButton />
         <PdfHybridLogsButton />
         <PdfHybridDownloadButton />
+        {showCompileTimer && <PdfCompileTime />}
       </div>
       <div className="toolbar-pdf-right">
         <div className="toolbar-pdf-controls" id="toolbar-pdf-controls" />