only show execution start time after 60 seconds

DanFitzgibbon · Nov 1, 2024 · c885df4 · c885df4
1 parent 4ec0491
commit c885df4
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 8 deletions.
diff --git a/apps/web/src/components/ExecutionStatusText.tsx b/apps/web/src/components/ExecutionStatusText.tsx
@@ -4,9 +4,10 @@ import {
   CloudArrowDownIcon,
   Cog8ToothIcon,
 } from '@heroicons/react/20/solid'
+import { useEffect, useState } from 'react'
 
 type StartExecutionStatusTextProps = {
-  startExecutionTime: string
+  startExecutionTime: string | null
 }
 
 type LastExecutedStatusTextProps = {
@@ -30,12 +31,27 @@ export const QuerySucceededText = ({
 export const LoadingQueryText = ({
   startExecutionTime,
 }: StartExecutionStatusTextProps) => {
+  const [showStartTime, setShowStartTime] = useState(false)
+  useEffect(() => {
+    if (startExecutionTime) {
+      const interval = setInterval(() => {
+        setShowStartTime(true)
+      }, 60000)
+      return () => clearInterval(interval)
+    }
+  }, [startExecutionTime])
+
   return (
     <span className="font-syne text-gray-400 text-xs flex items-center select-none">
       <CloudArrowDownIcon className="w-4 h-4 mr-1" />
       <span className="pt-0.5">
-        Executing query, started at{' '}
-        {format(new Date(startExecutionTime), "h:mm a 'on' do MMM, yyyy")}
+        Executing query
+        {showStartTime && startExecutionTime
+          ? ` since ${format(
+              new Date(startExecutionTime),
+              'h:mm a - do MMM, yyyy'
+            )}...`
+          : '...'}
       </span>
     </span>
   )
@@ -53,12 +69,27 @@ export const LoadingEnvText = () => {
 export const ExecutingPythonText = ({
   startExecutionTime,
 }: StartExecutionStatusTextProps) => {
+  const [showStartTime, setShowStartTime] = useState(false)
+  useEffect(() => {
+    if (startExecutionTime) {
+      const interval = setInterval(() => {
+        setShowStartTime(true)
+      }, 60000)
+      return () => clearInterval(interval)
+    }
+  }, [startExecutionTime])
+
   return (
     <span className="font-syne text-gray-400 text-xs flex items-center select-none">
       <CloudArrowDownIcon className="w-4 h-4 mr-1" />
       <span className="pt-0.5">
-        Executing Python code, started at{' '}
-        {format(new Date(startExecutionTime), "h:mm a 'on' do MMM, yyyy")}
+        Executing Python code
+        {showStartTime && startExecutionTime
+          ? ` since ${format(
+              new Date(startExecutionTime),
+              'h:mm a - do MMM, yyyy'
+            )}...`
+          : '...'}
       </span>
     </span>
   )

diff --git a/apps/web/src/components/v2Editor/customBlocks/python/index.tsx b/apps/web/src/components/v2Editor/customBlocks/python/index.tsx
@@ -142,12 +142,15 @@ function PythonBlock(props: Props) {
   const lastQuery = props.block.getAttribute('lastQuery')
   const startQueryTime = props.block.getAttribute('startQueryTime')
   const lastQueryTime = props.block.getAttribute('lastQueryTime')
+
   const queryStatusText = useMemo(() => {
     if (status === 'running' || status === 'running-suggestion') {
       if (envStatus === 'Starting') {
         return <LoadingEnvText />
       } else {
-        return <ExecutingPythonText startExecutionTime={startQueryTime} />
+        return (
+          <ExecutingPythonText startExecutionTime={startQueryTime ?? null} />
+        )
       }
     }
 

diff --git a/apps/web/src/components/v2Editor/customBlocks/sql/index.tsx b/apps/web/src/components/v2Editor/customBlocks/sql/index.tsx
@@ -230,10 +230,12 @@ function SQLBlock(props: Props) {
         if (envStatus === 'Starting') {
           return <LoadingEnvText />
         } else {
-          return <LoadingQueryText startExecutionTime={startQueryTime} />
+          return (
+            <LoadingQueryText startExecutionTime={startQueryTime ?? null} />
+          )
         }
     }
-  }, [execStatus, lastQuery, lastQueryTime, source, envStatus])
+  }, [execStatus, source, lastQuery, lastQueryTime, startQueryTime, envStatus])
 
   const onSubmitEditWithAI = useCallback(() => {
     requestSQLEditWithAI(props.block)