diff --git a/.changeset/fix-table-complete-mode-loading.md b/.changeset/fix-table-complete-mode-loading.md new file mode 100644 index 0000000000..8e27f2f23f --- /dev/null +++ b/.changeset/fix-table-complete-mode-loading.md @@ -0,0 +1,5 @@ +--- +'@backstage/ui': patch +--- + +Fixed a bug in the `useTable` hook where the loading skeleton was never shown for `complete` mode when using `getData`. The initial data state was an empty array instead of `undefined`, causing the `Table` component to skip the loading state. diff --git a/packages/ui/src/components/Table/hooks/useCompletePagination.ts b/packages/ui/src/components/Table/hooks/useCompletePagination.ts index 5aae9a36c1..d652f5203f 100644 --- a/packages/ui/src/components/Table/hooks/useCompletePagination.ts +++ b/packages/ui/src/components/Table/hooks/useCompletePagination.ts @@ -43,7 +43,7 @@ export function useCompletePagination( const getData = useStableCallback(getDataProp); const { sort, filter, search } = query; - const [items, setItems] = useState([]); + const [items, setItems] = useState(undefined); const [isLoading, setIsLoading] = useState(!data); const [error, setError] = useState(undefined); const [loadCount, setLoadCount] = useState(0); @@ -95,6 +95,9 @@ export function useCompletePagination( // Process data client-side (filter, search, sort) const processedData = useMemo(() => { + if (!resolvedItems) { + return undefined; + } let result = [...resolvedItems]; if (filter !== undefined && filterFn) { result = filterFn(result, filter); @@ -108,11 +111,11 @@ export function useCompletePagination( return result; }, [resolvedItems, sort, filter, search, filterFn, searchFn, sortFn]); - const totalCount = processedData.length; + const totalCount = processedData?.length ?? 0; // Paginate the processed data const paginatedData = useMemo( - () => processedData.slice(offset, offset + pageSize), + () => processedData?.slice(offset, offset + pageSize), [processedData, offset, pageSize], );