add loading indicator for data warehouse tables

PostHog · Mar 27, 2024 · 227a79b · 227a79b
1 parent 177d646
commit 227a79b
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 6 deletions.
diff --git a/frontend/src/lib/components/DatabaseTableTree/DatabaseTableTree.tsx b/frontend/src/lib/components/DatabaseTableTree/DatabaseTableTree.tsx
@@ -17,6 +17,7 @@ export interface TreeItemFolder {
     name: string
     items: TreeItemLeaf[]
     emptyLabel?: JSX.Element
+    isLoading?: boolean
 }
 
 export interface TreeItemLeaf {

diff --git a/frontend/src/lib/components/DatabaseTableTree/TreeRow.tsx b/frontend/src/lib/components/DatabaseTableTree/TreeRow.tsx
@@ -1,6 +1,7 @@
 import './TreeRow.scss'
 
 import { IconChevronDown } from '@posthog/icons'
+import { Spinner } from '@posthog/lemon-ui'
 import clsx from 'clsx'
 import { IconChevronRight } from 'lib/lemon-ui/icons'
 import { useCallback, useState } from 'react'
@@ -64,10 +65,16 @@ export function TreeFolderRow({ item, depth, onClick, selectedRow }: TreeFolderR
                     <div
                         // eslint-disable-next-line react/forbid-dom-props
                         style={{
-                            marginLeft: `${2 * depth}rem`,
+                            marginLeft: `${3 * depth}rem`,
                         }}
                     >
-                        {emptyLabel ? emptyLabel : <span className="text-muted">No tables found</span>}
+                        {item.isLoading ? (
+                            <Spinner style={{ fontSize: 20, marginTop: 2 }} />
+                        ) : emptyLabel ? (
+                            emptyLabel
+                        ) : (
+                            <span className="text-muted">No tables found</span>
+                        )}
                     </div>
                 ))}
         </li>

diff --git a/frontend/src/scenes/data-warehouse/external/DataWarehouseTables.tsx b/frontend/src/scenes/data-warehouse/external/DataWarehouseTables.tsx
@@ -17,8 +17,16 @@ import { dataWarehouseSceneLogic } from './dataWarehouseSceneLogic'
 import SourceModal from './SourceModal'
 
 export const DataWarehouseTables = (): JSX.Element => {
-    const { isSourceModalOpen, externalTables, posthogTables, savedQueriesFormatted, allTables, selectedRow } =
-        useValues(dataWarehouseSceneLogic)
+    const {
+        isSourceModalOpen,
+        externalTables,
+        dataWarehouseLoading,
+        posthogTables,
+        savedQueriesFormatted,
+        allTables,
+        selectedRow,
+        dataWarehouseSavedQueriesLoading,
+    } = useValues(dataWarehouseSceneLogic)
     const { toggleSourceModal, selectRow, deleteDataWarehouseSavedQuery, deleteDataWarehouseTable } =
         useActions(dataWarehouseSceneLogic)
     const { featureFlags } = useValues(featureFlagLogic)
@@ -82,6 +90,7 @@ export const DataWarehouseTables = (): JSX.Element => {
                         </Link>
                     </span>
                 ),
+                isLoading: dataWarehouseLoading,
             },
             {
                 name: 'PostHog',
@@ -99,6 +108,7 @@ export const DataWarehouseTables = (): JSX.Element => {
                     table: table,
                     icon: <IconBrackets />,
                 })),
+                isLoading: dataWarehouseSavedQueriesLoading,
             })
         }
 

diff --git a/frontend/src/scenes/data-warehouse/external/dataWarehouseSceneLogic.ts b/frontend/src/scenes/data-warehouse/external/dataWarehouseSceneLogic.ts
@@ -18,9 +18,9 @@ export const dataWarehouseSceneLogic = kea<dataWarehouseSceneLogicType>([
             userLogic,
             ['user'],
             databaseTableListLogic,
-            ['filteredTables', 'dataWarehouse'],
+            ['filteredTables', 'dataWarehouse', 'dataWarehouseLoading'],
             dataWarehouseSavedQueriesLogic,
-            ['savedQueries'],
+            ['savedQueries', 'dataWarehouseSavedQueriesLoading'],
             featureFlagLogic,
             ['featureFlags'],
         ],