diff --git a/apps/web/src/components/ExecutionStatusText.tsx b/apps/web/src/components/ExecutionStatusText.tsx index f2c8f0e4..ad95f81c 100644 --- 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 ( - 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' + )}...` + : '...'} ) @@ -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 ( - 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' + )}...` + : '...'} ) diff --git a/apps/web/src/components/v2Editor/customBlocks/python/index.tsx b/apps/web/src/components/v2Editor/customBlocks/python/index.tsx index ba3bf3ba..855f0ec5 100644 --- 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 } else { - return + return ( + + ) } } diff --git a/apps/web/src/components/v2Editor/customBlocks/sql/index.tsx b/apps/web/src/components/v2Editor/customBlocks/sql/index.tsx index bdca894c..39018dc3 100644 --- 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 } else { - return + return ( + + ) } } - }, [execStatus, lastQuery, lastQueryTime, source, envStatus]) + }, [execStatus, source, lastQuery, lastQueryTime, startQueryTime, envStatus]) const onSubmitEditWithAI = useCallback(() => { requestSQLEditWithAI(props.block)