From 744f9044a274460fe83e9961cc687f0714dee374 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fredrik=20Adel=C3=B6w?= <freben@spotify.com>
Date: Thu, 19 Mar 2026 10:06:14 +0100
Subject: [PATCH] Keep showing stale table data during filter loading
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The Table component replaces all data rows with a loading spinner when
isLoading is true. This caused a flash of empty table between filter
changes. Now only show the loading state when there's no data to
display yet (initial load), keeping stale results visible during
filter transitions.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Signed-off-by: Fredrik Adelöw <freben@spotify.com>
---
 .changeset/fix-catalog-table-loading-flash.md      |  5 +++++
 .../src/components/CatalogTable/CatalogTable.tsx   | 14 ++++++++++----
 2 files changed, 15 insertions(+), 4 deletions(-)
 create mode 100644 .changeset/fix-catalog-table-loading-flash.md

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) => {
       <CursorPaginatedCatalogTable
         columns={tableColumns}
         emptyContent={emptyContent}
-        isLoading={loading}
+        isLoading={isLoading}
         title={title}
         actions={actions}
         subtitle={subtitle}
@@ -224,7 +230,7 @@ export const CatalogTable = (props: CatalogTableProps) => {
       <OffsetPaginatedCatalogTable
         columns={tableColumns}
         emptyContent={emptyContent}
-        isLoading={loading}
+        isLoading={isLoading}
         title={title}
         actions={actions}
         subtitle={subtitle}
@@ -240,7 +246,7 @@ export const CatalogTable = (props: CatalogTableProps) => {
 
   return (
     <Table<CatalogTableRow>
-      isLoading={loading}
+      isLoading={isLoading}
       columns={tableColumns}
       options={{
         paging: showPagination,