Enhance ProgressRadial alignment in FacetSideBar.

Wrapped ProgressRadial in a flex container to center it vertically and horizontally. Added a new CSS class for consistent styling and improved visual alignment. This ensures a better user experience when the facets are loading.
hms-dbmi · Jan 28, 2025 · b24c4a9 · b24c4a9
1 parent 93c83b3
commit b24c4a9
Showing 1 changed file with 12 additions and 1 deletion.
diff --git a/src/lib/components/explorer/FacetSideBar.svelte b/src/lib/components/explorer/FacetSideBar.svelte
@@ -47,8 +47,19 @@
   });
 </script>
 
+<style>
+    .radial-container {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: 100%;
+    }
+</style>
+
 {#await facetsPromise}
-  <ProgressRadial />
+  <div class="radial-container">
+    <ProgressRadial width="w-10" />
+  </div>
 {:then newFacets}
   {#if newFacets?.length > 0}
     <Accordion rounded="rounded-container-token">