feat(insights): add loading state to sql insights (#19328)

PostHog · Dec 14, 2023 · fed2153 · fed2153
1 parent 3e9aad2
commit fed2153
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 3 deletions.
diff --git a/frontend/src/queries/nodes/DataVisualization/DataVisualization.tsx b/frontend/src/queries/nodes/DataVisualization/DataVisualization.tsx
@@ -1,5 +1,7 @@
 import { LemonDivider } from '@posthog/lemon-ui'
 import { BindLogic, useValues } from 'kea'
+import { AnimationType } from 'lib/animations/animations'
+import { Animation } from 'lib/components/Animation/Animation'
 import { useCallback, useState } from 'react'
 import { insightLogic } from 'scenes/insights/insightLogic'
 
@@ -52,7 +54,7 @@ export function DataTableVisualization(props: DataTableVisualizationProps): JSX.
         cachedResults: props.cachedResults,
     }
 
-    const { query, visualizationType, showEditingUI, showResultControls, sourceFeatures } =
+    const { query, visualizationType, showEditingUI, showResultControls, sourceFeatures, response, responseLoading } =
         useValues(builtDataVisualizationLogic)
 
     const setQuerySource = useCallback(
@@ -61,7 +63,13 @@ export function DataTableVisualization(props: DataTableVisualizationProps): JSX.
     )
 
     let component: JSX.Element | null = null
-    if (visualizationType === ChartDisplayType.ActionsTable) {
+    if (!response && responseLoading) {
+        return (
+            <div className="flex flex-col flex-1 justify-center items-center border rounded">
+                <Animation type={AnimationType.LaptopHog} />
+            </div>
+        )
+    } else if (visualizationType === ChartDisplayType.ActionsTable) {
         component = (
             <DataTable
                 uniqueKey={key}

diff --git a/frontend/src/queries/nodes/DataVisualization/dataVisualizationLogic.ts b/frontend/src/queries/nodes/DataVisualization/dataVisualizationLogic.ts
@@ -41,7 +41,14 @@ export const dataVisualizationLogic = kea<dataVisualizationLogicType>([
     key((props) => props.key),
     path(['queries', 'nodes', 'DataVisualization', 'dataVisualizationLogic']),
     connect({
-        values: [teamLogic, ['currentTeamId'], insightSceneLogic, ['insightMode'], dataNodeLogic, ['response']],
+        values: [
+            teamLogic,
+            ['currentTeamId'],
+            insightSceneLogic,
+            ['insightMode'],
+            dataNodeLogic,
+            ['response', 'responseLoading'],
+        ],
         actions: [dataNodeLogic, ['loadDataSuccess']],
     }),
     props({ query: {} } as DataVisualizationLogicProps),