From 588514536a591538eb4ef920d819e0fd279334e2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fredrik=20Adel=C3=B6w?= <freben@gmail.com>
Date: Fri, 22 May 2026 12:28:12 +0200
Subject: [PATCH] Keep title consistent with displayed data during transitions
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Derive the title's kind label from the displayed entities instead
of the filter state. Only show the count when both the list and
count have settled (not loading), so stale counts from a previous
filter don't appear alongside new data. The spinner shows whenever
anything is still loading (list OR count).

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Signed-off-by: Fredrik Adelöw <freben@gmail.com>
---
 .../components/CatalogTable/CatalogTable.tsx  | 28 ++++++++++++-------
 1 file changed, 18 insertions(+), 10 deletions(-)

diff --git a/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx b/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx
index e76f4ef27a..0b2a3db877 100644
--- a/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx
+++ b/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx
@@ -194,29 +194,37 @@ export const CatalogTable = (props: CatalogTableProps) => {
     },
   ];
 
-  const currentKind = filters.kind?.label || '';
+  // Derive the title's kind label from the displayed entities so the
+  // title stays consistent with the rows during filter transitions.
+  const displayedKind =
+    entities[0]?.kind?.toLocaleLowerCase('en-US') ?? filters.kind?.value;
+  const displayedKindLabel =
+    displayedKind === filters.kind?.value?.toLocaleLowerCase('en-US')
+      ? filters.kind?.label || ''
+      : capitalize(displayedKind || '');
   const currentType = filters.type?.value || '';
-  const currentCount = typeof totalItems === 'number' ? `(${totalItems})` : '';
+  const countIsCorrect =
+    typeof totalItems === 'number' && !totalItemsLoading && !loading;
+  const currentCount = countIsCorrect ? `(${totalItems})` : '';
+  const somethingIsLoading = loading || totalItemsLoading;
   // TODO(timbonicus): remove the title from the CatalogTable once using EntitySearchBar
   const titlePreamble = capitalize(
     filters.user?.value ?? t('catalogTable.allFilters'),
   );
   const titleBase =
     props.title ||
-    [titlePreamble, currentType, pluralize(currentKind)]
+    [titlePreamble, currentType, pluralize(displayedKindLabel)]
       .filter(s => s)
       .join(' ');
-  const title = (
+  const title = props.title ? (
+    titleBase
+  ) : (
     <span
       style={{ display: 'inline-flex', alignItems: 'center', gap: '0.5em' }}
     >
       {titleBase}
-      {currentCount && (
-        <span style={{ opacity: totalItemsLoading ? 0.5 : 1 }}>
-          {currentCount}
-        </span>
-      )}
-      {loading && !isLoading && (
+      {currentCount}
+      {somethingIsLoading && !isLoading && (
         <CircularProgress size="0.8em" data-testid="loading-indicator" />
       )}
     </span>