chore(ui): copy style from public/index.html to keep consistency

apache · Oct 22, 2024 · 9fa6ef6 · 9fa6ef6
1 parent 8753716
commit 9fa6ef6
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 10 deletions.
diff --git a/ui/src/components/InitialLoadingPlaceholder/index.scss b/ui/src/components/InitialLoadingPlaceholder/index.scss
@@ -0,0 +1,35 @@
+// Same as spin in `public/index.html`
+
+@keyframes _initial-loading-spin {
+  to { transform: rotate(360deg) }
+}
+
+.InitialLoadingPlaceholder {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background-color: white;
+  z-index: 9999;
+
+  &-spinnerContainer {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+
+  &-spinner {
+    box-sizing: border-box;
+    display: inline-block;
+    width: 2rem;
+    height: 2rem;
+    vertical-align: -.125em;
+    border: .25rem solid currentColor;
+    border-right-color: transparent;
+    color: rgba(108, 117, 125, .75);
+    border-radius: 50%;
+    animation: 0.75s linear infinite _initial-loading-spin;
+  }
+}
diff --git a/ui/src/components/InitialLoadingPlaceholder/index.tsx b/ui/src/components/InitialLoadingPlaceholder/index.tsx
@@ -1,16 +1,13 @@
-import { Spinner } from 'react-bootstrap';
+// Same as spin in `public/index.html`
+
+import './index.scss';
 
 function InitialLoadingPlaceholder() {
   return (
-    <div
-      style={{
-        flexGrow: 1,
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-      }}>
-      <Spinner />
-      <span style={{ marginLeft: 8 }}>Initializing</span>
+    <div className="InitialLoadingPlaceholder">
+      <div className="InitialLoadingPlaceholder-spinnerContainer">
+        <div className="InitialLoadingPlaceholder-spinner" />
+      </div>
     </div>
   );
 }