Extract loader

page/src/App.tsx

@@ -3,8 +3,8 @@ import { TooltipProvider } from "@/components/ui/tooltip";
 import { HashRouter, Route, Routes, Navigate } from "react-router-dom";
 import { Playground, storeEmulateData } from "./playground";
 import { LandingPage } from "./landing-page";
-import { useEffect, useState } from "react";
 import { useParams } from "react-router-dom";
+import Loader from "./Loader";
 
 import "@fontsource/inter/latin.css";
 
@@ -17,28 +17,8 @@ function EmulateFile() {
   return <Navigate to="/playground" replace />;
 }
 
-function isWindowLoading() {
-  return !!(window as any).loading;
-}
-
-function useLoader() {
-  const [isLoading, setIsLoading] = useState(isWindowLoading());
-
-  useEffect(() => {
-    const id = setInterval(() => {
-      setIsLoading(isWindowLoading());
-    }, 60);
-
-    return () => {
-      clearInterval(id);
-    };
-  });
-
-  return isLoading;
-}
-
-function Loader() {
-  const loading = useLoader();
+function Spinner() {
+  const loading = Loader.useLoader();
 
   if (!loading) {
     return <></>;
@@ -61,7 +41,7 @@ function App() {
             <Route path="/emulate/:encodedData?" element={<EmulateFile />} />
           </Routes>
         </HashRouter>
-        <Loader />
+        <Spinner />
       </TooltipProvider>
     </ThemeProvider>
   );

page/src/Loader.ts

@@ -0,0 +1,49 @@
+import { useEffect, useState } from "react";
+
+type Callback = (loading: boolean) => void;
+
+class Loader {
+  private callbacks: Set<Callback> = new Set();
+  private loading: boolean = false;
+
+  public isLoading(): boolean {
+    return this.loading;
+  }
+
+  public setLoading(value: boolean) {
+    if (this.loading == value) {
+      return;
+    }
+
+    this.loading = value;
+    this.callbacks.forEach((callback) => callback(this.loading));
+  }
+
+  public register(callback: Callback): void {
+    this.callbacks.add(callback);
+  }
+
+  public unregister(callback: Callback): void {
+    this.callbacks.delete(callback);
+  }
+
+  public useLoader() {
+    const [isLoading, setIsLoading] = useState(this.isLoading());
+
+    useEffect(() => {
+      function callback(loading: boolean) {
+        setIsLoading(loading);
+      }
+
+      this.register(callback);
+
+      return () => {
+        this.unregister(callback);
+      };
+    });
+
+    return isLoading;
+  }
+}
+
+export default new Loader();

page/src/animation.css

@@ -1,311 +1,311 @@
-:root {
-  --ring-full-color: #ffffff00;
-  --ring-half-color: #ffffff75;
-}
-
-/**
-  * Ring of dots
-  *
-  * @author jh3y
-*/
-@-webkit-keyframes ring-of-dots {
-  0% {
-    -webkit-box-shadow:
-      20px 0px 0 0 white,
-      12.4698px 15.63663px 0 0 white,
-      -4.45042px 19.49856px 0 0 white,
-      -18.01938px 8.67767px 0 0 white,
-      -18.01938px -8.67767px 0 0 white,
-      -4.45042px -19.49856px 0 0 var(--ring-half-color),
-      12.4698px -15.63663px 0 0 var(--ring-full-color);
-    box-shadow:
-      20px 0px 0 0 white,
-      12.4698px 15.63663px 0 0 white,
-      -4.45042px 19.49856px 0 0 white,
-      -18.01938px 8.67767px 0 0 white,
-      -18.01938px -8.67767px 0 0 white,
-      -4.45042px -19.49856px 0 0 var(--ring-half-color),
-      12.4698px -15.63663px 0 0 var(--ring-full-color);
-  }
-  14.28571% {
-    -webkit-box-shadow:
-      20px 0px 0 0 white,
-      12.4698px 15.63663px 0 0 white,
-      -4.45042px 19.49856px 0 0 white,
-      -18.01938px 8.67767px 0 0 white,
-      -18.01938px -8.67767px 0 0 var(--ring-half-color),
-      -4.45042px -19.49856px 0 0 var(--ring-full-color),
-      12.4698px -15.63663px 0 0 white;
-    box-shadow:
-      20px 0px 0 0 white,
-      12.4698px 15.63663px 0 0 white,
-      -4.45042px 19.49856px 0 0 white,
-      -18.01938px 8.67767px 0 0 white,
-      -18.01938px -8.67767px 0 0 var(--ring-half-color),
-      -4.45042px -19.49856px 0 0 var(--ring-full-color),
-      12.4698px -15.63663px 0 0 white;
-  }
-  28.57143% {
-    -webkit-box-shadow:
-      20px 0px 0 0 white,
-      12.4698px 15.63663px 0 0 white,
-      -4.45042px 19.49856px 0 0 white,
-      -18.01938px 8.67767px 0 0 var(--ring-half-color),
-      -18.01938px -8.67767px 0 0 var(--ring-full-color),
-      -4.45042px -19.49856px 0 0 white,
-      12.4698px -15.63663px 0 0 white;
-    box-shadow:
-      20px 0px 0 0 white,
-      12.4698px 15.63663px 0 0 white,
-      -4.45042px 19.49856px 0 0 white,
-      -18.01938px 8.67767px 0 0 var(--ring-half-color),
-      -18.01938px -8.67767px 0 0 var(--ring-full-color),
-      -4.45042px -19.49856px 0 0 white,
-      12.4698px -15.63663px 0 0 white;
-  }
-  42.85714% {
-    -webkit-box-shadow:
-      20px 0px 0 0 white,
-      12.4698px 15.63663px 0 0 white,
-      -4.45042px 19.49856px 0 0 var(--ring-half-color),
-      -18.01938px 8.67767px 0 0 var(--ring-full-color),
-      -18.01938px -8.67767px 0 0 white,
-      -4.45042px -19.49856px 0 0 white,
-      12.4698px -15.63663px 0 0 white;
-    box-shadow:
-      20px 0px 0 0 white,
-      12.4698px 15.63663px 0 0 white,
-      -4.45042px 19.49856px 0 0 var(--ring-half-color),
-      -18.01938px 8.67767px 0 0 var(--ring-full-color),
-      -18.01938px -8.67767px 0 0 white,
-      -4.45042px -19.49856px 0 0 white,
-      12.4698px -15.63663px 0 0 white;
-  }
-  57.14286% {
-    -webkit-box-shadow:
-      20px 0px 0 0 white,
-      12.4698px 15.63663px 0 0 var(--ring-half-color),
-      -4.45042px 19.49856px 0 0 var(--ring-full-color),
-      -18.01938px 8.67767px 0 0 white,
-      -18.01938px -8.67767px 0 0 white,
-      -4.45042px -19.49856px 0 0 white,
-      12.4698px -15.63663px 0 0 white;
-    box-shadow:
-      20px 0px 0 0 white,
-      12.4698px 15.63663px 0 0 var(--ring-half-color),
-      -4.45042px 19.49856px 0 0 var(--ring-full-color),
-      -18.01938px 8.67767px 0 0 white,
-      -18.01938px -8.67767px 0 0 white,
-      -4.45042px -19.49856px 0 0 white,
-      12.4698px -15.63663px 0 0 white;
-  }
-  71.42857% {
-    -webkit-box-shadow:
-      20px 0px 0 0 var(--ring-half-color),
-      12.4698px 15.63663px 0 0 var(--ring-full-color),
-      -4.45042px 19.49856px 0 0 white,
-      -18.01938px 8.67767px 0 0 white,
-      -18.01938px -8.67767px 0 0 white,
-      -4.45042px -19.49856px 0 0 white,
-      12.4698px -15.63663px 0 0 white;
-    box-shadow:
-      20px 0px 0 0 var(--ring-half-color),
-      12.4698px 15.63663px 0 0 var(--ring-full-color),
-      -4.45042px 19.49856px 0 0 white,
-      -18.01938px 8.67767px 0 0 white,
-      -18.01938px -8.67767px 0 0 white,
-      -4.45042px -19.49856px 0 0 white,
-      12.4698px -15.63663px 0 0 white;
-  }
-  85.71429% {
-    -webkit-box-shadow:
-      20px 0px 0 0 var(--ring-full-color),
-      12.4698px 15.63663px 0 0 white,
-      -4.45042px 19.49856px 0 0 white,
-      -18.01938px 8.67767px 0 0 white,
-      -18.01938px -8.67767px 0 0 white,
-      -4.45042px -19.49856px 0 0 white,
-      12.4698px -15.63663px 0 0 var(--ring-half-color);
-    box-shadow:
-      20px 0px 0 0 var(--ring-full-color),
-      12.4698px 15.63663px 0 0 white,
-      -4.45042px 19.49856px 0 0 white,
-      -18.01938px 8.67767px 0 0 white,
-      -18.01938px -8.67767px 0 0 white,
-      -4.45042px -19.49856px 0 0 white,
-      12.4698px -15.63663px 0 0 var(--ring-half-color);
-  }
-  100% {
-    -webkit-box-shadow:
-      20px 0px 0 0 white,
-      12.4698px 15.63663px 0 0 white,
-      -4.45042px 19.49856px 0 0 white,
-      -18.01938px 8.67767px 0 0 white,
-      -18.01938px -8.67767px 0 0 white,
-      -4.45042px -19.49856px 0 0 var(--ring-half-color),
-      12.4698px -15.63663px 0 0 var(--ring-full-color);
-    box-shadow:
-      20px 0px 0 0 white,
-      12.4698px 15.63663px 0 0 white,
-      -4.45042px 19.49856px 0 0 white,
-      -18.01938px 8.67767px 0 0 white,
-      -18.01938px -8.67767px 0 0 white,
-      -4.45042px -19.49856px 0 0 var(--ring-half-color),
-      12.4698px -15.63663px 0 0 var(--ring-full-color);
-  }
-}
-@keyframes ring-of-dots {
-  0% {
-    -webkit-box-shadow:
-      20px 0px 0 0 white,
-      12.4698px 15.63663px 0 0 white,
-      -4.45042px 19.49856px 0 0 white,
-      -18.01938px 8.67767px 0 0 white,
-      -18.01938px -8.67767px 0 0 white,
-      -4.45042px -19.49856px 0 0 var(--ring-half-color),
-      12.4698px -15.63663px 0 0 var(--ring-full-color);
-    box-shadow:
-      20px 0px 0 0 white,
-      12.4698px 15.63663px 0 0 white,
-      -4.45042px 19.49856px 0 0 white,
-      -18.01938px 8.67767px 0 0 white,
-      -18.01938px -8.67767px 0 0 white,
-      -4.45042px -19.49856px 0 0 var(--ring-half-color),
-      12.4698px -15.63663px 0 0 var(--ring-full-color);
-  }
-  14.28571% {
-    -webkit-box-shadow:
-      20px 0px 0 0 white,
-      12.4698px 15.63663px 0 0 white,
-      -4.45042px 19.49856px 0 0 white,
-      -18.01938px 8.67767px 0 0 white,
-      -18.01938px -8.67767px 0 0 var(--ring-half-color),
-      -4.45042px -19.49856px 0 0 var(--ring-full-color),
-      12.4698px -15.63663px 0 0 white;
-    box-shadow:
-      20px 0px 0 0 white,
-      12.4698px 15.63663px 0 0 white,
-      -4.45042px 19.49856px 0 0 white,
-      -18.01938px 8.67767px 0 0 white,
-      -18.01938px -8.67767px 0 0 var(--ring-half-color),
-      -4.45042px -19.49856px 0 0 var(--ring-full-color),
-      12.4698px -15.63663px 0 0 white;
-  }
-  28.57143% {
-    -webkit-box-shadow:
-      20px 0px 0 0 white,
-      12.4698px 15.63663px 0 0 white,
-      -4.45042px 19.49856px 0 0 white,
-      -18.01938px 8.67767px 0 0 var(--ring-half-color),
-      -18.01938px -8.67767px 0 0 var(--ring-full-color),
-      -4.45042px -19.49856px 0 0 white,
-      12.4698px -15.63663px 0 0 white;
-    box-shadow:
-      20px 0px 0 0 white,
-      12.4698px 15.63663px 0 0 white,
-      -4.45042px 19.49856px 0 0 white,
-      -18.01938px 8.67767px 0 0 var(--ring-half-color),
-      -18.01938px -8.67767px 0 0 var(--ring-full-color),
-      -4.45042px -19.49856px 0 0 white,
-      12.4698px -15.63663px 0 0 white;
-  }
-  42.85714% {
-    -webkit-box-shadow:
-      20px 0px 0 0 white,
-      12.4698px 15.63663px 0 0 white,
-      -4.45042px 19.49856px 0 0 var(--ring-half-color),
-      -18.01938px 8.67767px 0 0 var(--ring-full-color),
-      -18.01938px -8.67767px 0 0 white,
-      -4.45042px -19.49856px 0 0 white,
-      12.4698px -15.63663px 0 0 white;
-    box-shadow:
-      20px 0px 0 0 white,
-      12.4698px 15.63663px 0 0 white,
-      -4.45042px 19.49856px 0 0 var(--ring-half-color),
-      -18.01938px 8.67767px 0 0 var(--ring-full-color),
-      -18.01938px -8.67767px 0 0 white,
-      -4.45042px -19.49856px 0 0 white,
-      12.4698px -15.63663px 0 0 white;
-  }
-  57.14286% {
-    -webkit-box-shadow:
-      20px 0px 0 0 white,
-      12.4698px 15.63663px 0 0 var(--ring-half-color),
-      -4.45042px 19.49856px 0 0 var(--ring-full-color),
-      -18.01938px 8.67767px 0 0 white,
-      -18.01938px -8.67767px 0 0 white,
-      -4.45042px -19.49856px 0 0 white,
-      12.4698px -15.63663px 0 0 white;
-    box-shadow:
-      20px 0px 0 0 white,
-      12.4698px 15.63663px 0 0 var(--ring-half-color),
-      -4.45042px 19.49856px 0 0 var(--ring-full-color),
-      -18.01938px 8.67767px 0 0 white,
-      -18.01938px -8.67767px 0 0 white,
-      -4.45042px -19.49856px 0 0 white,
-      12.4698px -15.63663px 0 0 white;
-  }
-  71.42857% {
-    -webkit-box-shadow:
-      20px 0px 0 0 var(--ring-half-color),
-      12.4698px 15.63663px 0 0 var(--ring-full-color),
-      -4.45042px 19.49856px 0 0 white,
-      -18.01938px 8.67767px 0 0 white,
-      -18.01938px -8.67767px 0 0 white,
-      -4.45042px -19.49856px 0 0 white,
-      12.4698px -15.63663px 0 0 white;
-    box-shadow:
-      20px 0px 0 0 var(--ring-half-color),
-      12.4698px 15.63663px 0 0 var(--ring-full-color),
-      -4.45042px 19.49856px 0 0 white,
-      -18.01938px 8.67767px 0 0 white,
-      -18.01938px -8.67767px 0 0 white,
-      -4.45042px -19.49856px 0 0 white,
-      12.4698px -15.63663px 0 0 white;
-  }
-  85.71429% {
-    -webkit-box-shadow:
-      20px 0px 0 0 var(--ring-full-color),
-      12.4698px 15.63663px 0 0 white,
-      -4.45042px 19.49856px 0 0 white,
-      -18.01938px 8.67767px 0 0 white,
-      -18.01938px -8.67767px 0 0 white,
-      -4.45042px -19.49856px 0 0 white,
-      12.4698px -15.63663px 0 0 var(--ring-half-color);
-    box-shadow:
-      20px 0px 0 0 var(--ring-full-color),
-      12.4698px 15.63663px 0 0 white,
-      -4.45042px 19.49856px 0 0 white,
-      -18.01938px 8.67767px 0 0 white,
-      -18.01938px -8.67767px 0 0 white,
-      -4.45042px -19.49856px 0 0 white,
-      12.4698px -15.63663px 0 0 var(--ring-half-color);
-  }
-  100% {
-    -webkit-box-shadow:
-      20px 0px 0 0 white,
-      12.4698px 15.63663px 0 0 white,
-      -4.45042px 19.49856px 0 0 white,
-      -18.01938px 8.67767px 0 0 white,
-      -18.01938px -8.67767px 0 0 white,
-      -4.45042px -19.49856px 0 0 var(--ring-half-color),
-      12.4698px -15.63663px 0 0 var(--ring-full-color);
-    box-shadow:
-      20px 0px 0 0 white,
-      12.4698px 15.63663px 0 0 white,
-      -4.45042px 19.49856px 0 0 white,
-      -18.01938px 8.67767px 0 0 white,
-      -18.01938px -8.67767px 0 0 white,
-      -4.45042px -19.49856px 0 0 var(--ring-half-color),
-      12.4698px -15.63663px 0 0 var(--ring-full-color);
-  }
-}
-
-.ring-of-dots:before {
-  animation: ring-of-dots 1s infinite linear reverse;
-  border-radius: 10px;
-  content: "";
-  display: block;
-  height: 10px;
-  width: 10px;
-}
+:root {
+  --ring-full-color: #ffffff00;
+  --ring-half-color: #ffffff75;
+}
+
+/**
+  * Ring of dots
+  *
+  * @author jh3y
+*/
+@-webkit-keyframes ring-of-dots {
+  0% {
+    -webkit-box-shadow:
+      20px 0px 0 0 white,
+      12.4698px 15.63663px 0 0 white,
+      -4.45042px 19.49856px 0 0 white,
+      -18.01938px 8.67767px 0 0 white,
+      -18.01938px -8.67767px 0 0 white,
+      -4.45042px -19.49856px 0 0 var(--ring-half-color),
+      12.4698px -15.63663px 0 0 var(--ring-full-color);
+    box-shadow:
+      20px 0px 0 0 white,
+      12.4698px 15.63663px 0 0 white,
+      -4.45042px 19.49856px 0 0 white,
+      -18.01938px 8.67767px 0 0 white,
+      -18.01938px -8.67767px 0 0 white,
+      -4.45042px -19.49856px 0 0 var(--ring-half-color),
+      12.4698px -15.63663px 0 0 var(--ring-full-color);
+  }
+  14.28571% {
+    -webkit-box-shadow:
+      20px 0px 0 0 white,
+      12.4698px 15.63663px 0 0 white,
+      -4.45042px 19.49856px 0 0 white,
+      -18.01938px 8.67767px 0 0 white,
+      -18.01938px -8.67767px 0 0 var(--ring-half-color),
+      -4.45042px -19.49856px 0 0 var(--ring-full-color),
+      12.4698px -15.63663px 0 0 white;
+    box-shadow:
+      20px 0px 0 0 white,
+      12.4698px 15.63663px 0 0 white,
+      -4.45042px 19.49856px 0 0 white,
+      -18.01938px 8.67767px 0 0 white,
+      -18.01938px -8.67767px 0 0 var(--ring-half-color),
+      -4.45042px -19.49856px 0 0 var(--ring-full-color),
+      12.4698px -15.63663px 0 0 white;
+  }
+  28.57143% {
+    -webkit-box-shadow:
+      20px 0px 0 0 white,
+      12.4698px 15.63663px 0 0 white,
+      -4.45042px 19.49856px 0 0 white,
+      -18.01938px 8.67767px 0 0 var(--ring-half-color),
+      -18.01938px -8.67767px 0 0 var(--ring-full-color),
+      -4.45042px -19.49856px 0 0 white,
+      12.4698px -15.63663px 0 0 white;
+    box-shadow:
+      20px 0px 0 0 white,
+      12.4698px 15.63663px 0 0 white,
+      -4.45042px 19.49856px 0 0 white,
+      -18.01938px 8.67767px 0 0 var(--ring-half-color),
+      -18.01938px -8.67767px 0 0 var(--ring-full-color),
+      -4.45042px -19.49856px 0 0 white,
+      12.4698px -15.63663px 0 0 white;
+  }
+  42.85714% {
+    -webkit-box-shadow:
+      20px 0px 0 0 white,
+      12.4698px 15.63663px 0 0 white,
+      -4.45042px 19.49856px 0 0 var(--ring-half-color),
+      -18.01938px 8.67767px 0 0 var(--ring-full-color),
+      -18.01938px -8.67767px 0 0 white,
+      -4.45042px -19.49856px 0 0 white,
+      12.4698px -15.63663px 0 0 white;
+    box-shadow:
+      20px 0px 0 0 white,
+      12.4698px 15.63663px 0 0 white,
+      -4.45042px 19.49856px 0 0 var(--ring-half-color),
+      -18.01938px 8.67767px 0 0 var(--ring-full-color),
+      -18.01938px -8.67767px 0 0 white,
+      -4.45042px -19.49856px 0 0 white,
+      12.4698px -15.63663px 0 0 white;
+  }
+  57.14286% {
+    -webkit-box-shadow:
+      20px 0px 0 0 white,
+      12.4698px 15.63663px 0 0 var(--ring-half-color),
+      -4.45042px 19.49856px 0 0 var(--ring-full-color),
+      -18.01938px 8.67767px 0 0 white,
+      -18.01938px -8.67767px 0 0 white,
+      -4.45042px -19.49856px 0 0 white,
+      12.4698px -15.63663px 0 0 white;
+    box-shadow:
+      20px 0px 0 0 white,
+      12.4698px 15.63663px 0 0 var(--ring-half-color),
+      -4.45042px 19.49856px 0 0 var(--ring-full-color),
+      -18.01938px 8.67767px 0 0 white,
+      -18.01938px -8.67767px 0 0 white,
+      -4.45042px -19.49856px 0 0 white,
+      12.4698px -15.63663px 0 0 white;
+  }
+  71.42857% {
+    -webkit-box-shadow:
+      20px 0px 0 0 var(--ring-half-color),
+      12.4698px 15.63663px 0 0 var(--ring-full-color),
+      -4.45042px 19.49856px 0 0 white,
+      -18.01938px 8.67767px 0 0 white,
+      -18.01938px -8.67767px 0 0 white,
+      -4.45042px -19.49856px 0 0 white,
+      12.4698px -15.63663px 0 0 white;
+    box-shadow:
+      20px 0px 0 0 var(--ring-half-color),
+      12.4698px 15.63663px 0 0 var(--ring-full-color),
+      -4.45042px 19.49856px 0 0 white,
+      -18.01938px 8.67767px 0 0 white,
+      -18.01938px -8.67767px 0 0 white,
+      -4.45042px -19.49856px 0 0 white,
+      12.4698px -15.63663px 0 0 white;
+  }
+  85.71429% {
+    -webkit-box-shadow:
+      20px 0px 0 0 var(--ring-full-color),
+      12.4698px 15.63663px 0 0 white,
+      -4.45042px 19.49856px 0 0 white,
+      -18.01938px 8.67767px 0 0 white,
+      -18.01938px -8.67767px 0 0 white,
+      -4.45042px -19.49856px 0 0 white,
+      12.4698px -15.63663px 0 0 var(--ring-half-color);
+    box-shadow:
+      20px 0px 0 0 var(--ring-full-color),
+      12.4698px 15.63663px 0 0 white,
+      -4.45042px 19.49856px 0 0 white,
+      -18.01938px 8.67767px 0 0 white,
+      -18.01938px -8.67767px 0 0 white,
+      -4.45042px -19.49856px 0 0 white,
+      12.4698px -15.63663px 0 0 var(--ring-half-color);
+  }
+  100% {
+    -webkit-box-shadow:
+      20px 0px 0 0 white,
+      12.4698px 15.63663px 0 0 white,
+      -4.45042px 19.49856px 0 0 white,
+      -18.01938px 8.67767px 0 0 white,
+      -18.01938px -8.67767px 0 0 white,
+      -4.45042px -19.49856px 0 0 var(--ring-half-color),
+      12.4698px -15.63663px 0 0 var(--ring-full-color);
+    box-shadow:
+      20px 0px 0 0 white,
+      12.4698px 15.63663px 0 0 white,
+      -4.45042px 19.49856px 0 0 white,
+      -18.01938px 8.67767px 0 0 white,
+      -18.01938px -8.67767px 0 0 white,
+      -4.45042px -19.49856px 0 0 var(--ring-half-color),
+      12.4698px -15.63663px 0 0 var(--ring-full-color);
+  }
+}
+@keyframes ring-of-dots {
+  0% {
+    -webkit-box-shadow:
+      20px 0px 0 0 white,
+      12.4698px 15.63663px 0 0 white,
+      -4.45042px 19.49856px 0 0 white,
+      -18.01938px 8.67767px 0 0 white,
+      -18.01938px -8.67767px 0 0 white,
+      -4.45042px -19.49856px 0 0 var(--ring-half-color),
+      12.4698px -15.63663px 0 0 var(--ring-full-color);
+    box-shadow:
+      20px 0px 0 0 white,
+      12.4698px 15.63663px 0 0 white,
+      -4.45042px 19.49856px 0 0 white,
+      -18.01938px 8.67767px 0 0 white,
+      -18.01938px -8.67767px 0 0 white,
+      -4.45042px -19.49856px 0 0 var(--ring-half-color),
+      12.4698px -15.63663px 0 0 var(--ring-full-color);
+  }
+  14.28571% {
+    -webkit-box-shadow:
+      20px 0px 0 0 white,
+      12.4698px 15.63663px 0 0 white,
+      -4.45042px 19.49856px 0 0 white,
+      -18.01938px 8.67767px 0 0 white,
+      -18.01938px -8.67767px 0 0 var(--ring-half-color),
+      -4.45042px -19.49856px 0 0 var(--ring-full-color),
+      12.4698px -15.63663px 0 0 white;
+    box-shadow:
+      20px 0px 0 0 white,
+      12.4698px 15.63663px 0 0 white,
+      -4.45042px 19.49856px 0 0 white,
+      -18.01938px 8.67767px 0 0 white,
+      -18.01938px -8.67767px 0 0 var(--ring-half-color),
+      -4.45042px -19.49856px 0 0 var(--ring-full-color),
+      12.4698px -15.63663px 0 0 white;
+  }
+  28.57143% {
+    -webkit-box-shadow:
+      20px 0px 0 0 white,
+      12.4698px 15.63663px 0 0 white,
+      -4.45042px 19.49856px 0 0 white,
+      -18.01938px 8.67767px 0 0 var(--ring-half-color),
+      -18.01938px -8.67767px 0 0 var(--ring-full-color),
+      -4.45042px -19.49856px 0 0 white,
+      12.4698px -15.63663px 0 0 white;
+    box-shadow:
+      20px 0px 0 0 white,
+      12.4698px 15.63663px 0 0 white,
+      -4.45042px 19.49856px 0 0 white,
+      -18.01938px 8.67767px 0 0 var(--ring-half-color),
+      -18.01938px -8.67767px 0 0 var(--ring-full-color),
+      -4.45042px -19.49856px 0 0 white,
+      12.4698px -15.63663px 0 0 white;
+  }
+  42.85714% {
+    -webkit-box-shadow:
+      20px 0px 0 0 white,
+      12.4698px 15.63663px 0 0 white,
+      -4.45042px 19.49856px 0 0 var(--ring-half-color),
+      -18.01938px 8.67767px 0 0 var(--ring-full-color),
+      -18.01938px -8.67767px 0 0 white,
+      -4.45042px -19.49856px 0 0 white,
+      12.4698px -15.63663px 0 0 white;
+    box-shadow:
+      20px 0px 0 0 white,
+      12.4698px 15.63663px 0 0 white,
+      -4.45042px 19.49856px 0 0 var(--ring-half-color),
+      -18.01938px 8.67767px 0 0 var(--ring-full-color),
+      -18.01938px -8.67767px 0 0 white,
+      -4.45042px -19.49856px 0 0 white,
+      12.4698px -15.63663px 0 0 white;
+  }
+  57.14286% {
+    -webkit-box-shadow:
+      20px 0px 0 0 white,
+      12.4698px 15.63663px 0 0 var(--ring-half-color),
+      -4.45042px 19.49856px 0 0 var(--ring-full-color),
+      -18.01938px 8.67767px 0 0 white,
+      -18.01938px -8.67767px 0 0 white,
+      -4.45042px -19.49856px 0 0 white,
+      12.4698px -15.63663px 0 0 white;
+    box-shadow:
+      20px 0px 0 0 white,
+      12.4698px 15.63663px 0 0 var(--ring-half-color),
+      -4.45042px 19.49856px 0 0 var(--ring-full-color),
+      -18.01938px 8.67767px 0 0 white,
+      -18.01938px -8.67767px 0 0 white,
+      -4.45042px -19.49856px 0 0 white,
+      12.4698px -15.63663px 0 0 white;
+  }
+  71.42857% {
+    -webkit-box-shadow:
+      20px 0px 0 0 var(--ring-half-color),
+      12.4698px 15.63663px 0 0 var(--ring-full-color),
+      -4.45042px 19.49856px 0 0 white,
+      -18.01938px 8.67767px 0 0 white,
+      -18.01938px -8.67767px 0 0 white,
+      -4.45042px -19.49856px 0 0 white,
+      12.4698px -15.63663px 0 0 white;
+    box-shadow:
+      20px 0px 0 0 var(--ring-half-color),
+      12.4698px 15.63663px 0 0 var(--ring-full-color),
+      -4.45042px 19.49856px 0 0 white,
+      -18.01938px 8.67767px 0 0 white,
+      -18.01938px -8.67767px 0 0 white,
+      -4.45042px -19.49856px 0 0 white,
+      12.4698px -15.63663px 0 0 white;
+  }
+  85.71429% {
+    -webkit-box-shadow:
+      20px 0px 0 0 var(--ring-full-color),
+      12.4698px 15.63663px 0 0 white,
+      -4.45042px 19.49856px 0 0 white,
+      -18.01938px 8.67767px 0 0 white,
+      -18.01938px -8.67767px 0 0 white,
+      -4.45042px -19.49856px 0 0 white,
+      12.4698px -15.63663px 0 0 var(--ring-half-color);
+    box-shadow:
+      20px 0px 0 0 var(--ring-full-color),
+      12.4698px 15.63663px 0 0 white,
+      -4.45042px 19.49856px 0 0 white,
+      -18.01938px 8.67767px 0 0 white,
+      -18.01938px -8.67767px 0 0 white,
+      -4.45042px -19.49856px 0 0 white,
+      12.4698px -15.63663px 0 0 var(--ring-half-color);
+  }
+  100% {
+    -webkit-box-shadow:
+      20px 0px 0 0 white,
+      12.4698px 15.63663px 0 0 white,
+      -4.45042px 19.49856px 0 0 white,
+      -18.01938px 8.67767px 0 0 white,
+      -18.01938px -8.67767px 0 0 white,
+      -4.45042px -19.49856px 0 0 var(--ring-half-color),
+      12.4698px -15.63663px 0 0 var(--ring-full-color);
+    box-shadow:
+      20px 0px 0 0 white,
+      12.4698px 15.63663px 0 0 white,
+      -4.45042px 19.49856px 0 0 white,
+      -18.01938px 8.67767px 0 0 white,
+      -18.01938px -8.67767px 0 0 white,
+      -4.45042px -19.49856px 0 0 var(--ring-half-color),
+      12.4698px -15.63663px 0 0 var(--ring-full-color);
+  }
+}
+
+.ring-of-dots:before {
+  animation: ring-of-dots 1s infinite linear reverse;
+  border-radius: 10px;
+  content: "";
+  display: block;
+  height: 10px;
+  width: 10px;
+}

page/src/main.tsx

@@ -3,19 +3,16 @@ import { createRoot } from "react-dom/client";
 import "./index.css";
 import App from "./App.tsx";
 import { registerSW } from "virtual:pwa-register";
-
-(window as any).loading = false;
+import Loader from "./Loader";
 
 registerSW({
   onNeedRefresh() {
-    setTimeout(() => {
-      window.location.reload();
-    }, 5000);
+    window.location.reload();
   },
   onOfflineReady() {},
   onRegisteredSW(_, registration) {
     registration?.addEventListener("updatefound", () => {
-      (window as any).loading = true;
+      Loader.setLoading(true);
     });
   },
 });