From 227a79b812894059b8e0fe9403d2a1fa6a91a0e5 Mon Sep 17 00:00:00 2001
From: eric <eeoneric@gmail.com>
Date: Wed, 27 Mar 2024 12:32:05 -0400
Subject: [PATCH] add loading indicator for data warehouse tables

---
 .../DatabaseTableTree/DatabaseTableTree.tsx        |  1 +
 .../lib/components/DatabaseTableTree/TreeRow.tsx   | 11 +++++++++--
 .../external/DataWarehouseTables.tsx               | 14 ++++++++++++--
 .../external/dataWarehouseSceneLogic.ts            |  4 ++--
 4 files changed, 24 insertions(+), 6 deletions(-)

diff --git a/frontend/src/lib/components/DatabaseTableTree/DatabaseTableTree.tsx b/frontend/src/lib/components/DatabaseTableTree/DatabaseTableTree.tsx
index 2d7bfb893150e..95ef3b5e7ae9b 100644
--- 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
index b49167a4f6c67..95e7d79dc5620 100644
--- 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
index 1c72b31bd011f..92bdf54dee2df 100644
--- 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
index db722a37777a1..5cc8809610ace 100644
--- 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'],
         ],