From 9fa6ef6851895a52f18535aafd006d0192aafe5d Mon Sep 17 00:00:00 2001
From: Ourai Lin <ourairyu@gmail.com>
Date: Tue, 22 Oct 2024 11:32:52 +0800
Subject: [PATCH] chore(ui): copy style from `public/index.html` to keep
 consistency

---
 .../InitialLoadingPlaceholder/index.scss      | 35 +++++++++++++++++++
 .../InitialLoadingPlaceholder/index.tsx       | 17 ++++-----
 2 files changed, 42 insertions(+), 10 deletions(-)
 create mode 100644 ui/src/components/InitialLoadingPlaceholder/index.scss

diff --git a/ui/src/components/InitialLoadingPlaceholder/index.scss b/ui/src/components/InitialLoadingPlaceholder/index.scss
new file mode 100644
index 000000000..2b73f1636
--- /dev/null
+++ 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
index 28ba1cfd7..41e81d1a4 100644
--- 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>
   );
 }