fix: Revert some UI changes, these looked ugly

PostHog · Feb 3, 2025 · 822d62c · 822d62c
1 parent 531668a
commit 822d62c
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 13 deletions.
diff --git a/frontend/src/lib/lemon-ui/LoadingBar/LoadingBar.tsx b/frontend/src/lib/lemon-ui/LoadingBar/LoadingBar.tsx
@@ -22,6 +22,10 @@ export function LoadingBar({ className }: SpinnerProps): JSX.Element {
                 if (newProgress >= 85) {
                     newProgress = prevProgress + 0.001
                 }
+                if (newProgress >= 99) {
+                    newProgress = prevProgress
+                }
+
                 return newProgress
             })
         }, 50)

diff --git a/frontend/src/scenes/insights/EmptyStates/EmptyStates.stories.tsx b/frontend/src/scenes/insights/EmptyStates/EmptyStates.stories.tsx
@@ -9,6 +9,7 @@ import { InsightShortId } from '~/types'
 
 import insight from '../../../mocks/fixtures/api/projects/team_id/insights/trendsLine.json'
 import { insightVizDataLogic } from '../insightVizDataLogic'
+import { LOADING_MESSAGES } from './EmptyStates'
 import funnelOneStep from './funnelOneStep.json'
 
 type Story = StoryObj<typeof App>
@@ -148,3 +149,13 @@ LongLoading.parameters = {
 }
 
 export const FunnelSingleStep: Story = createInsightStory(funnelOneStep as any)
+
+export const LoadingMessages: StoryFn = () => {
+    return (
+        <ul>
+            {LOADING_MESSAGES.map((message) => (
+                <li key={message}>{message}</li>
+            ))}
+        </ul>
+    )
+}
diff --git a/frontend/src/scenes/insights/EmptyStates/EmptyStates.tsx b/frontend/src/scenes/insights/EmptyStates/EmptyStates.tsx
@@ -11,7 +11,7 @@ import { IconErrorOutline, IconOpenInNew } from 'lib/lemon-ui/icons'
 import { Link } from 'lib/lemon-ui/Link'
 import { LoadingBar } from 'lib/lemon-ui/LoadingBar'
 import { Tooltip } from 'lib/lemon-ui/Tooltip'
-import { humanFriendlyNumber, humanizeBytes } from 'lib/utils'
+import { humanFriendlyNumber, humanizeBytes, inStorybook, inStorybookTestRunner } from 'lib/utils'
 import posthog from 'posthog-js'
 import { useEffect, useState } from 'react'
 import { funnelDataLogic } from 'scenes/funnels/funnelDataLogic'
@@ -111,7 +111,7 @@ function QueryDebuggerButton({ query }: { query?: Record<string, any> | null }):
     )
 }
 
-const LOADING_MESSAGES = [
+export const LOADING_MESSAGES = [
     'Crunching through hogloads of data…',
     'Teaching hedgehogs to count…',
     'Waking up the hibernating data hogs…',
@@ -136,7 +136,7 @@ export function StatelessInsightLoadingState({
     const [secondsElapsed, setSecondsElapsed] = useState(0)
 
     const [loadingMessageIndex, setLoadingMessageIndex] = useState(() =>
-        Math.floor(Math.random() * LOADING_MESSAGES.length)
+        inStorybook() || inStorybookTestRunner() ? 0 : Math.floor(Math.random() * LOADING_MESSAGES.length)
     )
     const [isLoadingMessageVisible, setIsLoadingMessageVisible] = useState(true)
 
@@ -168,6 +168,11 @@ export function StatelessInsightLoadingState({
         const TOGGLE_INTERVAL = 3000
         const FADE_OUT_DURATION = 300
 
+        // Don't toggle loading messages in storybook, will make tests flaky if so
+        if (inStorybook() || inStorybookTestRunner()) {
+            return
+        }
+
         const interval = setInterval(() => {
             setIsLoadingMessageVisible(false)
             setTimeout(() => {
@@ -329,9 +334,19 @@ export function InsightValidationError({
     query?: Record<string, any> | null
 }): JSX.Element {
     return (
-        <div data-attr="insight-empty-state" className="insights-empty-state rounded p-4 m-2 h-full w-full">
-            <h2 className="text-xl leading-tight mb-6" data-attr="insight-loading-too-long">
-                <IconErrorOutline className="text-xl shrink-0 mr-2" />
+        <div
+            data-attr="insight-empty-state"
+            className="insights-empty-state flex flex-col items-center justify-center gap-2 rounded p-4 m-2 h-full w-full"
+        >
+            <IconWarning className="text-5xl shrink-0" />
+
+            <h2
+                data-attr="insight-loading-too-long"
+                className="text-xl leading-tight"
+                // TODO: Use an actual `text-warning` color once @adamleithp changes are live
+                // eslint-disable-next-line react/forbid-dom-props
+                style={{ color: 'var(--warning)' }}
+            >
                 There is a problem with this query
                 {/* Note that this phrasing above signals the issue is not intermittent, */}
                 {/* but rather that it's something with the definition of the query itself */}
@@ -374,13 +389,18 @@ export function InsightErrorState({ excludeDetail, title, query, queryId }: Insi
     return (
         <div
             data-attr="insight-empty-state"
-            className="insights-empty-state flex flex-col items-center justify-center rounded p-4 m-2 h-full w-full"
+            className="insights-empty-state flex flex-col items-center gap-2 justify-center rounded p-4 m-2 h-full w-full"
         >
-            <h2 className="text-xl leading-tight mb-6" data-attr="insight-loading-too-long">
-                <IconErrorOutline className="text-xl shrink-0 mr-2" />
-                <span className="text-accent-primary">
-                    {title || <span>There was a problem completing this query</span>}
-                </span>
+            <IconErrorOutline className="text-5xl shrink-0" />
+
+            <h2
+                className="text-xl leading-tight mb-6"
+                // TODO: Use an actual `text-danger` color once @adamleithp changes are live
+                // eslint-disable-next-line react/forbid-dom-props
+                style={{ color: 'var(--danger)' }}
+                data-attr="insight-loading-too-long"
+            >
+                {title || <span>There was a problem completing this query</span>}
                 {/* Note that this default phrasing above signals the issue is intermittent, */}
                 {/* and that perhaps the query will complete on retry */}
             </h2>
@@ -430,7 +450,7 @@ export function FunnelSingleStepState({ actionable = true }: FunnelSingleStepSta
 
     return (
         <div data-attr="insight-empty-state" className="flex flex-col flex-1 items-center justify-center m-2">
-            <div className="text-2xl text-muted mb-2">
+            <div className="text-5xl text-muted mb-2">
                 <IconPlusSquare />
             </div>
             <h2 className="text-xl leading-tight font-medium">Add another step!</h2>