fix(insights): Adjust insight loading queued state (#20424)

PostHog · Feb 20, 2024 · af5aadb · af5aadb
1 parent 4dd3c35
commit af5aadb
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 4 deletions.
diff --git a/frontend/src/lib/components/Cards/InsightCard/InsightCard.tsx b/frontend/src/lib/components/Cards/InsightCard/InsightCard.tsx
@@ -164,7 +164,7 @@ function VizComponentFallback(): JSX.Element {
 }
 
 export interface FilterBasedCardContentProps
-    extends Pick<InsightCardProps, 'insight' | 'loadingQueued' | 'loading' | 'apiErrored' | 'timedOut' | 'style'> {
+    extends Pick<InsightCardProps, 'insight' | 'loading' | 'apiErrored' | 'timedOut' | 'style'> {
     insightProps: InsightLogicProps
     tooFewFunnelSteps?: boolean
     validationError?: string | null
@@ -177,7 +177,6 @@ export interface FilterBasedCardContentProps
 export function FilterBasedCardContent({
     insight,
     insightProps,
-    loadingQueued,
     loading,
     setAreDetailsShown,
     apiErrored,
@@ -212,7 +211,6 @@ export function FilterBasedCardContent({
                 }
             >
                 {loading && <SpinnerOverlay />}
-                {loadingQueued && !loading && <SpinnerOverlay mode="waiting" />}
                 {tooFewFunnelSteps ? (
                     <FunnelSingleStepState actionable={false} />
                 ) : validationError ? (
@@ -311,6 +309,7 @@ function InsightCardInternal(
                     removeFromDashboard={removeFromDashboard}
                     deleteWithUndo={deleteWithUndo}
                     refresh={refresh}
+                    loading={loadingQueued || loading}
                     rename={rename}
                     duplicate={duplicate}
                     moveToDashboard={moveToDashboard}
@@ -334,7 +333,6 @@ function InsightCardInternal(
                     <FilterBasedCardContent
                         insight={insight}
                         insightProps={insightLogicProps}
-                        loadingQueued={loadingQueued}
                         loading={loading}
                         apiErrored={apiErrored}
                         timedOut={timedOut}

diff --git a/frontend/src/lib/components/Cards/InsightCard/InsightMeta.tsx b/frontend/src/lib/components/Cards/InsightCard/InsightMeta.tsx
@@ -8,7 +8,9 @@ import { ObjectTags } from 'lib/components/ObjectTags/ObjectTags'
 import { DashboardPrivilegeLevel } from 'lib/constants'
 import { LemonButton, LemonButtonWithDropdown } from 'lib/lemon-ui/LemonButton'
 import { LemonDivider } from 'lib/lemon-ui/LemonDivider'
+import { LemonTableLoader } from 'lib/lemon-ui/LemonTable/LemonTableLoader'
 import { Link } from 'lib/lemon-ui/Link'
+import { Spinner } from 'lib/lemon-ui/Spinner'
 import { Splotch, SplotchColor } from 'lib/lemon-ui/Splotch'
 import { Tooltip } from 'lib/lemon-ui/Tooltip'
 import { capitalizeFirstLetter } from 'lib/utils'
@@ -36,6 +38,7 @@ interface InsightMetaProps
         | 'removeFromDashboard'
         | 'deleteWithUndo'
         | 'refresh'
+        | 'loading'
         | 'rename'
         | 'duplicate'
         | 'dashboardId'
@@ -56,6 +59,7 @@ export function InsightMeta({
     removeFromDashboard,
     deleteWithUndo,
     refresh,
+    loading,
     rename,
     duplicate,
     moveToDashboard,
@@ -98,11 +102,24 @@ export function InsightMeta({
                     <Link to={urls.insightView(short_id)}>
                         <h4 title={name} data-attr="insight-card-title">
                             {name || <i>{summary}</i>}
+                            {loading && (
+                                <Tooltip
+                                    title="This insight is queued to check for newer results. It will be updated soon."
+                                    placement="topRight"
+                                >
+                                    <span className="text-primary text-sm font-medium">
+                                        <Spinner className="mx-1" />
+                                        Refreshing
+                                    </span>
+                                </Tooltip>
+                            )}
                         </h4>
                     </Link>
 
                     {!!insight.description && <div className="CardMeta__description">{insight.description}</div>}
                     {insight.tags && insight.tags.length > 0 && <ObjectTags tags={insight.tags} staticOnly />}
+
+                    {loading && <LemonTableLoader loading={true} />}
                 </>
             }
             metaDetails={<InsightDetails insight={insight} />}