Add loading schema spinner to dashboard

edgedb · Apr 26, 2024 · 24bc7de · 24bc7de
1 parent 69abc0c
commit 24bc7de
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 1 deletion.
diff --git a/shared/studio/tabs/dashboard/databaseDashboard.module.scss b/shared/studio/tabs/dashboard/databaseDashboard.module.scss
@@ -19,6 +19,19 @@
   }
 }
 
+.dashboard {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  align-items: center;
+  justify-content: center;
+  color: #555;
+
+  @include darkTheme {
+    color: #aaa;
+  }
+}
+
 .dashboardLayout,
 .firstDashboardLayout {
   display: flex;

diff --git a/shared/studio/tabs/dashboard/index.tsx b/shared/studio/tabs/dashboard/index.tsx
@@ -17,6 +17,7 @@ import {
 
 import Button from "@edgedb/common/ui/button";
 import {CustomScrollbars} from "@edgedb/common/ui/customScrollbar";
+import Spinner from "@edgedb/common/ui/spinner";
 
 import {
   HeaderDatabaseIcon,
@@ -41,7 +42,12 @@ export const DatabaseDashboard = observer(function DatabaseDashboard() {
   }, [dbState.schemaId]);
 
   if (dbState.schemaId == null) {
-    return <div className={styles.dashboard} />;
+    return (
+      <div className={styles.dashboard}>
+        <Spinner size={20} />
+        Loading schema...
+      </div>
+    );
   }
 
   if (dbState.schemaId.endsWith("__empty")) {