fix: Small loading bar improvements (#22327)

PostHog · May 16, 2024 · 236891c · 236891c
1 parent 4ddae62
commit 236891c
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 16 deletions.
diff --git a/frontend/src/queries/nodes/InsightViz/InsightVizDisplay.tsx b/frontend/src/queries/nodes/InsightViz/InsightVizDisplay.tsx
@@ -83,7 +83,7 @@ export function InsightVizDisplay({
         if (insightDataLoading) {
             return (
                 <div className="flex flex-col flex-1 justify-center items-center">
-                    <InsightLoadingState queryId={queryId} insightProps={insightProps} />
+                    <InsightLoadingState queryId={queryId} key={queryId} insightProps={insightProps} />
                 </div>
             )
         }

diff --git a/frontend/src/scenes/insights/EmptyStates/EmptyStates.tsx b/frontend/src/scenes/insights/EmptyStates/EmptyStates.tsx
@@ -79,7 +79,7 @@ function SamplingLink({ insightProps }: { insightProps: InsightLogicProps }): JS
 }
 function humanFileSize(size: number): string {
     const i = size == 0 ? 0 : Math.floor(Math.log(size) / Math.log(1024))
-    return +(size / Math.pow(1024, i)).toFixed(2) * 1 + ' ' + ['B', 'kB', 'MB', 'GB', 'TB'][i]
+    return (+(size / Math.pow(1024, i))).toFixed(2) + ' ' + ['B', 'kB', 'MB', 'GB', 'TB'][i]
 }
 
 export function InsightLoadingStateWithLoadingBar({
@@ -97,39 +97,37 @@ export function InsightLoadingStateWithLoadingBar({
     const [secondsElapsed, setSecondsElapsed] = useState(0)
 
     useEffect(() => {
-        setRowsRead(insightPollResponse?.previousStatus?.query_progress?.rows_read || 0)
-        setBytesRead(insightPollResponse?.previousStatus?.query_progress?.bytes_read || 0)
+        const status = insightPollResponse?.status?.query_progress
+        const previousStatus = insightPollResponse?.previousStatus?.query_progress
+        setRowsRead(previousStatus?.rows_read || 0)
+        setBytesRead(previousStatus?.bytes_read || 0)
         const interval = setInterval(() => {
             setRowsRead((rowsRead) => {
-                const diff =
-                    (insightPollResponse?.status?.query_progress?.rows_read || 0) -
-                    (insightPollResponse?.previousStatus?.query_progress?.rows_read || 0)
-                return rowsRead + diff / 30
+                const diff = (status?.rows_read || 0) - (previousStatus?.rows_read || 0)
+                return Math.min(rowsRead + diff / 30, status?.rows_read || 0)
             })
             setBytesRead((bytesRead) => {
-                const diff =
-                    (insightPollResponse?.status?.query_progress?.bytes_read || 0) -
-                    (insightPollResponse?.previousStatus?.query_progress?.bytes_read || 0)
-                return bytesRead + diff / 30
+                const diff = (status?.bytes_read || 0) - (previousStatus?.bytes_read || 0)
+                return Math.min(bytesRead + diff / 30, status?.bytes_read || 0)
             })
             setSecondsElapsed(() => {
-                return dayjs().diff(dayjs(insightPollResponse?.status?.start_time), 'second')
+                return dayjs().diff(dayjs(insightPollResponse?.status?.start_time), 'milliseconds')
             })
         }, 100)
 
         return () => clearInterval(interval)
     }, [insightPollResponse])
-    const bytesPerSecond = bytesRead / (secondsElapsed || 1)
+    const bytesPerSecond = (bytesRead / (secondsElapsed || 1)) * 1000
 
     return (
         <div className="insight-empty-state warning">
             <div className="empty-state-inner">
                 <p className="mx-auto text-center">Crunching through hogloads of data...</p>
-                <LoadingBar key={queryId} />
+                <LoadingBar />
                 <p className="mx-auto text-center text-xs">
                     {rowsRead > 0 && bytesRead > 0 && (
                         <>
-                            {humanFriendlyNumber(rowsRead || 0)} rows
+                            {humanFriendlyNumber(rowsRead || 0, 0)} rows
                             <br />
                             {humanFileSize(bytesRead || 0)} ({humanFileSize(bytesPerSecond || 0)}/s)
                         </>