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'], ],