chore(insights): Unflag insight loading bar (#25131)

Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com>
PostHog · Sep 25, 2024 · 0cc21dd · 0cc21dd
1 parent ac49aa7
commit 0cc21dd
Show file tree

Hide file tree

Showing 12 changed files with 22 additions and 80 deletions.
diff --git a/.../__snapshots__/filters-cohort-filters-fields-person-properties--basic--dark.png b/.../__snapshots__/filters-cohort-filters-fields-person-properties--basic--dark.png
diff --git a/...__snapshots__/filters-cohort-filters-fields-person-properties--basic--light.png b/...__snapshots__/filters-cohort-filters-fields-person-properties--basic--light.png
diff --git a/frontend/__snapshots__/scenes-app-dashboards--erroring--dark.png b/frontend/__snapshots__/scenes-app-dashboards--erroring--dark.png
diff --git a/frontend/__snapshots__/scenes-app-dashboards--erroring--light.png b/frontend/__snapshots__/scenes-app-dashboards--erroring--light.png
diff --git a/frontend/__snapshots__/scenes-app-persons-modal--server-error--dark.png b/frontend/__snapshots__/scenes-app-persons-modal--server-error--dark.png
diff --git a/frontend/__snapshots__/scenes-app-persons-modal--server-error--light.png b/frontend/__snapshots__/scenes-app-persons-modal--server-error--light.png
diff --git a/frontend/src/lib/components/Cards/InsightCard/InsightMeta.tsx b/frontend/src/lib/components/Cards/InsightCard/InsightMeta.tsx
@@ -108,8 +108,8 @@ export function InsightMeta({
                                     title="This insight is queued to check for newer results. It will be updated soon."
                                     placement="top-end"
                                 >
-                                    <span className="text-primary text-sm font-medium">
-                                        <Spinner className="mx-1" />
+                                    <span className="text-primary text-sm font-medium ml-1.5">
+                                        <Spinner className="mr-1.5 text-base" />
                                         Refreshing
                                     </span>
                                 </Tooltip>

diff --git a/frontend/src/lib/constants.tsx b/frontend/src/lib/constants.tsx
@@ -188,7 +188,6 @@ export const FEATURE_FLAGS = {
     SESSION_REPLAY_MOBILE_ONBOARDING: 'session-replay-mobile-onboarding', // owner: #team-replay
     HEATMAPS_UI: 'heatmaps-ui', // owner: @benjackwhite
     THEME: 'theme', // owner: @aprilfools
-    INSIGHT_LOADING_BAR: 'insight-loading-bar', // owner: @aspicer
     PROXY_AS_A_SERVICE: 'proxy-as-a-service', // owner: #team-infrastructure
     LIVE_EVENTS: 'live-events', // owner: @zach or @jams
     SETTINGS_PERSONS_JOIN_MODE: 'settings-persons-join-mode', // owner: @robbie-c

diff --git a/frontend/src/lib/lemon-ui/LoadingBar/LoadingBar.scss b/frontend/src/lib/lemon-ui/LoadingBar/LoadingBar.scss
@@ -3,19 +3,14 @@
     align-items: center;
 }
 
-.progress-info {
-    width: 30px;
-    padding-left: 5px;
-}
-
 .progress {
     position: relative;
     width: 100%;
     height: 10px;
     min-height: 1px;
     overflow: hidden;
     background: #eee;
-    border-radius: 3px;
+    border-radius: var(--radius-sm);
 }
 
 .progress-bar {

diff --git a/frontend/src/queries/query.ts b/frontend/src/queries/query.ts
@@ -43,7 +43,6 @@ const SYNC_ONLY_QUERY_KINDS = [
 
 export async function pollForResults(
     queryId: string,
-    showProgress: boolean,
     methodOptions?: ApiMethodOptions,
     onPoll?: (response: QueryStatus) => void
 ): Promise<QueryStatus> {
@@ -55,7 +54,7 @@ export async function pollForResults(
         currentDelay = Math.min(currentDelay * 1.25, QUERY_ASYNC_MAX_INTERVAL_SECONDS * 1000)
 
         try {
-            const statusResponse = (await api.queryStatus.get(queryId, showProgress)).query_status
+            const statusResponse = (await api.queryStatus.get(queryId, true)).query_status
             if (statusResponse.complete) {
                 return statusResponse
             }
@@ -90,7 +89,6 @@ async function executeQuery<N extends DataNode>(
         methodOptions?.async !== false &&
         !SYNC_ONLY_QUERY_KINDS.includes(queryNode.kind) &&
         !!featureFlagLogic.findMounted()?.values.featureFlags?.[FEATURE_FLAGS.QUERY_ASYNC]
-    const showProgress = !!featureFlagLogic.findMounted()?.values.featureFlags?.[FEATURE_FLAGS.INSIGHT_LOADING_BAR]
 
     if (!pollOnly) {
         const response = await api.query(queryNode, methodOptions, queryId, refresh, isAsyncQuery, filtersOverride)
@@ -114,7 +112,7 @@ async function executeQuery<N extends DataNode>(
             throw new Error('pollOnly requires a queryId')
         }
     }
-    const statusResponse = await pollForResults(queryId, showProgress, methodOptions, setPollResponse)
+    const statusResponse = await pollForResults(queryId, methodOptions, setPollResponse)
     return statusResponse.results
 }
 

diff --git a/frontend/src/scenes/dashboard/dashboardLogic.tsx b/frontend/src/scenes/dashboard/dashboardLogic.tsx
@@ -1128,7 +1128,7 @@ export const dashboardLogic = kea<dashboardLogicType>([
                 try {
                     breakpoint()
                     if (queryId) {
-                        await pollForResults(queryId, false, methodOptions)
+                        await pollForResults(queryId, methodOptions)
                         const currentTeamId = values.currentTeamId
                         // TODO: Check and remove - We get the insight again here to get everything in the right format (e.g. because of result vs results)
                         const polledInsight = await getSingleInsight(

diff --git a/frontend/src/scenes/insights/EmptyStates/EmptyStates.tsx b/frontend/src/scenes/insights/EmptyStates/EmptyStates.tsx
@@ -11,17 +11,13 @@ import {
 } from '@posthog/icons'
 import { LemonButton } from '@posthog/lemon-ui'
 import { useActions, useValues } from 'kea'
-import { AnimationType } from 'lib/animations/animations'
-import { Animation } from 'lib/components/Animation/Animation'
 import { BuilderHog3 } from 'lib/components/hedgehogs'
 import { supportLogic } from 'lib/components/Support/supportLogic'
-import { FEATURE_FLAGS } from 'lib/constants'
 import { dayjs } from 'lib/dayjs'
 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 { featureFlagLogic } from 'lib/logic/featureFlagLogic'
 import { humanFriendlyNumber } from 'lib/utils'
 import posthog from 'posthog-js'
 import { useEffect, useState } from 'react'
@@ -85,7 +81,7 @@ function humanFileSize(size: number): string {
     return (+(size / Math.pow(1024, i))).toFixed(2) + ' ' + ['B', 'kB', 'MB', 'GB', 'TB'][i]
 }
 
-export function InsightLoadingStateWithLoadingBar({
+export function InsightLoadingState({
     queryId,
     insightProps,
 }: {
@@ -131,7 +127,7 @@ export function InsightLoadingStateWithLoadingBar({
     return (
         <div className="insight-empty-state warning">
             <div className="empty-state-inner">
-                <p className="mx-auto text-center">Crunching through hogloads of data...</p>
+                <p className="mx-auto text-center font-medium italic">Crunching through hogloads of data…</p>
                 <LoadingBar />
                 <p className="mx-auto text-center text-xs">
                     {rowsRead > 0 && bytesRead > 0 && (
@@ -148,11 +144,9 @@ export function InsightLoadingStateWithLoadingBar({
                         </>
                     )}
                 </p>
-                <div className="p-4 rounded bg-bg-3000 flex gap-x-2 max-w-120">
-                    <div className="flex">
-                        <IconInfo className="w-4 h-4" />
-                    </div>
-                    <p className="text-xs m-0 leading-5">
+                <div className="flex items-center p-4 rounded bg-bg-3000 gap-x-3 max-w-120">
+                    <IconInfo className="text-xl shrink-0" />
+                    <p className="text-xs m-0">
                         {suggestedSamplingPercentage && !samplingPercentage ? (
                             <span data-attr="insight-loading-waiting-message">
                                 Need to speed things up? Try reducing the date range, removing breakdowns, or turning on{' '}
@@ -170,55 +164,9 @@ export function InsightLoadingStateWithLoadingBar({
                     </p>
                 </div>
                 {queryId ? (
-                    <div className="text-muted text-xs mx-auto text-center mt-6">Query ID: {queryId}</div>
-                ) : null}
-            </div>
-        </div>
-    )
-}
-
-export function InsightLoadingState({
-    queryId,
-    insightProps,
-}: {
-    queryId?: string | null
-    insightProps: InsightLogicProps
-}): JSX.Element {
-    const { featureFlags } = useValues(featureFlagLogic)
-    const { suggestedSamplingPercentage, samplingPercentage } = useValues(samplingFilterLogic(insightProps))
-
-    if (featureFlags[FEATURE_FLAGS.INSIGHT_LOADING_BAR]) {
-        return <InsightLoadingStateWithLoadingBar queryId={queryId} insightProps={insightProps} />
-    }
-
-    return (
-        <div className="insight-empty-state warning">
-            <Animation type={AnimationType.LaptopHog} />
-            <div className="empty-state-inner">
-                <p className="mx-auto text-center">Crunching through hogloads of data...</p>
-                <div className="p-4 rounded bg-bg-3000 flex gap-x-2 max-w-120">
-                    <div className="flex">
-                        <IconInfo className="w-4 h-4" />
+                    <div className="text-muted text-xs mx-auto text-center mt-5">
+                        Query ID: <span className="font-mono">{queryId}</span>
                     </div>
-                    <p className="text-xs m-0 leading-5">
-                        {suggestedSamplingPercentage && !samplingPercentage ? (
-                            <span data-attr="insight-loading-waiting-message">
-                                Need to speed things up? Try reducing the date range, removing breakdowns, or turning on{' '}
-                                <SamplingLink insightProps={insightProps} />.
-                            </span>
-                        ) : suggestedSamplingPercentage && samplingPercentage ? (
-                            <>
-                                Still waiting around? You must have lots of data! Kick it up a notch with{' '}
-                                <SamplingLink insightProps={insightProps} />. Or try reducing the date range and
-                                removing breakdowns.
-                            </>
-                        ) : (
-                            <>Need to speed things up? Try reducing the date range or removing breakdowns.</>
-                        )}
-                    </p>
-                </div>
-                {queryId ? (
-                    <div className="text-muted text-xs mx-auto text-center mt-6">Query ID: {queryId}</div>
                 ) : null}
             </div>
         </div>
@@ -237,11 +185,9 @@ export function InsightTimeoutState({ queryId }: { queryId?: string | null }): J
                     </div>
                     <h2 className="text-xl leading-tight mb-6">Your query took too long to complete</h2>
                 </>
-                <div className="p-4 rounded bg-bg-3000 flex gap-x-2 max-w-120">
-                    <div className="flex">
-                        <IconInfo className="w-4 h-4" />
-                    </div>
-                    <p className="text-xs m-0 leading-5">
+                <div className="flex items-center p-4 rounded bg-bg-3000 gap-x-3 max-w-120">
+                    <IconInfo className="text-xl shrink-0" />
+                    <p className="text-xs m-0">
                         <>
                             Sometimes this happens. Try refreshing the page, reducing the date range, or removing
                             breakdowns. If you're still having issues,{' '}
@@ -257,7 +203,9 @@ export function InsightTimeoutState({ queryId }: { queryId?: string | null }): J
                     </p>
                 </div>
                 {queryId ? (
-                    <div className="text-muted text-xs mx-auto text-center mt-6">Query ID: {queryId}</div>
+                    <div className="text-muted text-xs mx-auto text-center mt-5">
+                        Query ID: <span className="font-mono">{queryId}</span>
+                    </div>
                 ) : null}
             </div>
         </div>
@@ -309,7 +257,9 @@ export function InsightErrorState({ excludeDetail, title, query, queryId }: Insi
                         </ol>
                     </div>
                 )}
-                {queryId ? <div className="text-muted text-xs text-center">Query ID: {queryId}</div> : null}
+                <div className="text-muted text-xs text-center">
+                    Query ID: <span className="font-mono">{queryId}</span>
+                </div>
                 {query && (
                     <LemonButton
                         data-attr="insight-error-query"