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
- {emptyLabel ? emptyLabel : No tables found}
+ {item.isLoading ? (
+
+ ) : emptyLabel ? (
+ emptyLabel
+ ) : (
+ No tables found
+ )}
))}
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 => {
),
+ isLoading: dataWarehouseLoading,
},
{
name: 'PostHog',
@@ -99,6 +108,7 @@ export const DataWarehouseTables = (): JSX.Element => {
table: table,
icon: ,
})),
+ 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([
userLogic,
['user'],
databaseTableListLogic,
- ['filteredTables', 'dataWarehouse'],
+ ['filteredTables', 'dataWarehouse', 'dataWarehouseLoading'],
dataWarehouseSavedQueriesLogic,
- ['savedQueries'],
+ ['savedQueries', 'dataWarehouseSavedQueriesLoading'],
featureFlagLogic,
['featureFlags'],
],