From 20d663d8cf540939df4a570e0e4b857206cf53c7 Mon Sep 17 00:00:00 2001
From: Haoyu Xu <i@halyul.dev>
Date: Fri, 13 Oct 2023 22:47:17 -0400
Subject: [PATCH] feat(directory): added a loader before dom is loaded

---
 directory/index.html          | 88 ++++++++++++++++++++++++++++++-----
 directory/src/routes/Root.jsx |  8 ++++
 2 files changed, 84 insertions(+), 12 deletions(-)
diff --git a/directory/index.html b/directory/index.html
index fcf2089..34f576c 100644
--- a/directory/index.html
+++ b/directory/index.html
@@ -1,14 +1,78 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>aklive2d directory</title>
-    <script async defer data-website-id="05ee2d3d-66e0-429b-89ba-db112743a8c2" src="https://insights.halyul.dev/insights.js"
-      data-do-not-track="true" data-auto-track="false"></script>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/src/App.jsx"></script>
-  </body>
-</html>
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>aklive2d directory</title>
+  <script async defer data-website-id="05ee2d3d-66e0-429b-89ba-db112743a8c2"
+    src="https://insights.halyul.dev/insights.js" data-do-not-track="true" data-auto-track="false"></script>
+  <style>
+    .loader {
+      position: fixed;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      opacity: 1;
+    }
+
+    .loader.loaded {
+      opacity: 0;
+      transition: opacity cubic-bezier(0.65, 0.05, 0.36, 1) 0.3s;;
+    }
+
+    .loader .icon {
+      display: block;
+      margin: 0 auto;
+      width: 2rem;
+      height: 2rem;
+      border-left: 0.3rem solid;
+      border-bottom: 0.3rem solid;
+      border-right: 0.3rem solid;
+      border-top: 0.3rem solid;
+      transform: translateY(-0.3rem) rotate(-45deg);
+      animation: icon-flash 2s cubic-bezier(0.65, 0.05, 0.36, 1) infinite;
+    }
+
+    @media (prefers-color-scheme: dark) {
+      .loader {
+        background-color: #131313;
+      }
+
+      .loader .icon {
+        border-color: rgba(255, 255, 255, 87%);
+      }
+    }
+
+    @media (prefers-color-scheme: light) {
+      .loader {
+        background-color: #ececec;
+      }
+
+      .loader .icon {
+        border-color: rgba(0, 0, 0, 87%);
+      }
+    }
+
+    @keyframes icon-flash {
+      50% {
+        opacity: 0.2;
+      }
+    }
+  </style>
+</head>
+
+<body>
+  <div id="root"></div>
+  <div class="loader">
+    <span class="icon"></span>
+  </div>
+  <script type="module" src="/src/App.jsx"></script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/directory/src/routes/Root.jsx b/directory/src/routes/Root.jsx
index e5ac65f..39a8d80 100644
--- a/directory/src/routes/Root.jsx
+++ b/directory/src/routes/Root.jsx
@@ -75,6 +75,14 @@ export default function Root() {
     fetchOfficalUpdate()
   }, [fetchOfficalUpdate])
 
+  useEffect(() => {
+    document.querySelector('.loader').classList.add('loaded')
+    setTimeout(() => {
+      document.querySelector('.loader').style.display = 'none'
+    }, 500)
+  }
+  , [])
+
   return (
     <>
       <header className={header.header}>
