feat(ui): change loader to mui-like style, and async load js and css (#250)

* fix (ui): async load js and css

currently, loader only appears when js and css load failed. this fix to show loading animation while js and css is loading.

* feat(ui): change loader to mui-like style

index.html

@@ -48,21 +48,35 @@
         transform: scale(0.8);
         animation: fadeIn 0.6s ease-out 0.3s forwards;
       }
-      #app-loader .spinner::after {
+      #app-loader .spinner {
-        content: "";
+        display: inline-block;
-        position: absolute;
+        width: 40px;
-        top: -3px;
+        height: 40px;
-        left: -3px;
-        width: 100%;
-        height: 100%;
-        border: 4px solid rgba(0, 0, 0, 0.1);
-        border-radius: 50%;
-        border-top-color: var(--defaultThemeColor);
-        animation: spin 1s ease-in-out infinite;
       }
-      @keyframes spin {
+      #app-loader .spinner svg {
-        to {
+        display: block;
-          transform: rotate(360deg);
+      }
+      #app-loader .spinner .stroke {
+        stroke: var(--defaultThemeColor);
+        stroke-linecap: round;
+        animation: spinDash 1.4s ease-in-out infinite;
+      }
+      #app-loader .spinner .background {
+        stroke: rgba(0, 0, 0, 0.1)
+      }
+
+      @keyframes spinDash {
+        0% {
+          stroke-dasharray: 1px, 200px;
+          stroke-dashoffset: 0;
+        }
+        50% {
+          stroke-dasharray: 100px, 200px;
+          stroke-dashoffset: -15px;
+        }
+        100% {
+          stroke-dasharray: 1px, 200px;
+          stroke-dashoffset: -126px;
         }
       }
       @keyframes fadeIn {
@@ -77,9 +91,14 @@
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="app-loader">
       <div class="logo"></div>
-      <div class="spinner"></div>
+      <div class="spinner">
+        <svg viewBox="22 22 44 44">
+          <circle class="background" cx="44" cy="44" r="20" fill="none" stroke-width="4"></circle>
+          <circle class="stroke" cx="44" cy="44" r="20" fill="none" stroke-width="4"></circle>
+        </svg>
       </div>
-    <script type="module" src="/src/main.tsx"></script>
+    </div>
+    <script async type="module" src="/src/main.tsx"></script>
     <div id="root"></div>
     <script>
       document.addEventListener("DOMContentLoaded", function () {

vite.config.ts

@@ -37,6 +37,15 @@ export default defineConfig({
         },
       ],
     }),
+    {
+        name: "load-stylesheet-async",
+        transformIndexHtml(html) {
+          return html.replace(
+            /<link rel="stylesheet" crossorigin href="(.+?)">/g,
+            `<link rel="stylesheet" crossorigin href="$1" media="print" onload="this.media='all'">`
+          );
+        },
+    },
     {
       name: "generate-version",
       async writeBundle(outputOptions) {