From 0a1860bed23b77594e2ffe6b8152a39c15c6570c Mon Sep 17 00:00:00 2001
From: Laurin Quast <laurinquast@googlemail.com>
Date: Mon, 22 Jul 2024 11:25:00 +0200
Subject: [PATCH] fix: loading spinner positions (#5262)

---
 packages/web/app/src/pages/index.tsx             |  2 +-
 .../web/app/src/pages/target-checks-single.tsx   |  6 +++---
 packages/web/app/src/pages/target-explorer.tsx   |  2 +-
 .../web/app/src/pages/target-history-version.tsx |  7 ++++---
 packages/web/app/src/pages/target-laboratory.tsx |  2 +-
 packages/web/app/src/pages/target-settings.tsx   | 16 ++++++++--------
 6 files changed, 18 insertions(+), 17 deletions(-)

diff --git a/packages/web/app/src/pages/index.tsx b/packages/web/app/src/pages/index.tsx
index 1640bbadc..e6d0efdb6 100644
--- a/packages/web/app/src/pages/index.tsx
+++ b/packages/web/app/src/pages/index.tsx
@@ -55,7 +55,7 @@ export function IndexPage() {
   return (
     <>
       <Meta title="Welcome" />
-      <div className="flex size-full flex-row items-center justify-center">
+      <div className="flex size-full h-[100vh] flex-row items-center justify-center">
         <HiveLogo animated={false} className="size-16 animate-pulse" />
       </div>
     </>
diff --git a/packages/web/app/src/pages/target-checks-single.tsx b/packages/web/app/src/pages/target-checks-single.tsx
index 71d0515f2..de978aba9 100644
--- a/packages/web/app/src/pages/target-checks-single.tsx
+++ b/packages/web/app/src/pages/target-checks-single.tsx
@@ -1049,9 +1049,9 @@ const ActiveSchemaCheck = (props: {
   if (query.fetching || query.stale) {
     return (
       <div className="flex h-fit flex-1 items-center justify-center self-center">
-        <div className="flex flex-col items-center">
-          <Spinner className="size-12" />
-          <div className="mt-3">Loading Schema Check...</div>
+        <div className="flex flex-col items-center text-sm text-gray-500">
+          <Spinner className="mb-3 size-8" />
+          Loading Schema Check...
         </div>
       </div>
     );
diff --git a/packages/web/app/src/pages/target-explorer.tsx b/packages/web/app/src/pages/target-explorer.tsx
index 4f0a39a03..82afd2fa9 100644
--- a/packages/web/app/src/pages/target-explorer.tsx
+++ b/packages/web/app/src/pages/target-explorer.tsx
@@ -213,7 +213,7 @@ function ExplorerPageContent(props: {
           )}
         </div>
       </div>
-      {!query.fetching && (
+      {!query.fetching && !query.stale && (
         <>
           {latestValidSchemaVersion?.explorer && latestSchemaVersion ? (
             <>
diff --git a/packages/web/app/src/pages/target-history-version.tsx b/packages/web/app/src/pages/target-history-version.tsx
index d5f400b03..953bba447 100644
--- a/packages/web/app/src/pages/target-history-version.tsx
+++ b/packages/web/app/src/pages/target-history-version.tsx
@@ -583,14 +583,15 @@ function ActiveSchemaVersion(props: {
 
   const { error } = query;
 
-  const isLoading = query.fetching;
+  const isLoading = query.fetching || query.stale;
   const schemaVersion = query?.data?.target?.schemaVersion;
   const projectType = query?.data?.project?.type;
 
   if (isLoading || !schemaVersion || !projectType) {
     return (
-      <div className="flex size-full items-center justify-center">
-        <Spinner />
+      <div className="flex size-full flex-col items-center justify-center self-center text-sm text-gray-500">
+        <Spinner className="mb-3 size-8" />
+        Loading schema version...
       </div>
     );
   }
diff --git a/packages/web/app/src/pages/target-laboratory.tsx b/packages/web/app/src/pages/target-laboratory.tsx
index 586dc1108..d9f645e18 100644
--- a/packages/web/app/src/pages/target-laboratory.tsx
+++ b/packages/web/app/src/pages/target-laboratory.tsx
@@ -1103,7 +1103,7 @@ function LaboratoryPageContent(props: {
       `}</style>
       </Helmet>
 
-      {!query.fetching && (
+      {!query.fetching && !query.stale && (
         <div
           className={clsx(
             'grow',
diff --git a/packages/web/app/src/pages/target-settings.tsx b/packages/web/app/src/pages/target-settings.tsx
index ad46121b5..61f5559dc 100644
--- a/packages/web/app/src/pages/target-settings.tsx
+++ b/packages/web/app/src/pages/target-settings.tsx
@@ -1069,26 +1069,26 @@ const subPages = [
     key: 'general',
     title: 'General',
   },
-  {
-    key: 'cdn',
-    title: 'CDN Tokens',
-  },
   {
     key: 'registry-token',
     title: 'Registry Tokens',
   },
+  {
+    key: 'cdn',
+    title: 'CDN Tokens',
+  },
   {
     key: 'breaking-changes',
     title: 'Breaking Changes',
   },
-  {
-    key: 'base-schema',
-    title: 'Base Schema',
-  },
   {
     key: 'schema-contracts',
     title: 'Schema Contracts',
   },
+  {
+    key: 'base-schema',
+    title: 'Base Schema',
+  },
 ] as const;
 
 type SubPage = (typeof subPages)[number]['key'];