diff --git a/.changeset/fix-catalog-table-loading-flash.md b/.changeset/fix-catalog-table-loading-flash.md new file mode 100644 index 0000000000..1e75a6d7af --- /dev/null +++ b/.changeset/fix-catalog-table-loading-flash.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-catalog': patch +--- + +Fixed the catalog table briefly showing an empty loading state when changing filters. The table now keeps displaying stale results until new data arrives. diff --git a/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx b/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx index 7875431246..165d75bf48 100644 --- a/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx +++ b/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx @@ -108,6 +108,12 @@ export const CatalogTable = (props: CatalogTableProps) => { paginationMode, } = entityListContext; + // Only show the full loading indicator when there's no data to display yet + // (i.e. initial load). During filter changes we already have stale data to + // show, so we keep it visible and let the new results swap in seamlessly + // instead of briefly flashing an empty table. + const isLoading = loading && entities.length === 0; + const tableColumns = useMemo( () => typeof columns === 'function' ? columns(entityListContext) : columns, @@ -199,7 +205,7 @@ export const CatalogTable = (props: CatalogTableProps) => { const options: TableProps['options'] = { actionsColumnIndex: -1, loadingType: 'linear' as const, - showEmptyDataSourceMessage: !loading, + showEmptyDataSourceMessage: !isLoading, padding: 'dense' as const, ...tableOptions, }; @@ -209,7 +215,7 @@ export const CatalogTable = (props: CatalogTableProps) => { { { return ( - isLoading={loading} + isLoading={isLoading} columns={tableColumns} options={{ paging: showPagination,