From eb30aafd2c21fab080ac08f1528c5f32f9567748 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fredrik=20Adel=C3=B6w?= <freben@spotify.com>
Date: Thu, 19 Mar 2026 10:13:32 +0100
Subject: [PATCH] Align loading spinner with title text and reduce size
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Wrap the title + spinner in an inline-flex container for vertical
centering, and reduce the spinner to 0.8em so it doesn't affect the
overall box height.

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

diff --git a/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx b/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx
index 1a9d363ec4..9a667c76be 100644
--- a/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx
+++ b/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx
@@ -203,10 +203,10 @@ export const CatalogTable = (props: CatalogTableProps) => {
       .join(' ');
   const title =
     loading && !isLoading ? (
-      <>
+      <span style={{ display: 'inline-flex', alignItems: 'center' }}>
         {titleText}{' '}
-        <CircularProgress size="1em" data-testid="loading-indicator" />
-      </>
+        <CircularProgress size="0.8em" data-testid="loading-indicator" />
+      </span>
     ) : (
       titleText
     );