Merge branch 'dev'

src/components/Spinner.astro

@@ -4,26 +4,36 @@
 
 <script is:inline>
     (() => {
+        const KEY = "__page_loading_indicator_bound__";
+        if (window[KEY]) return;
+        window[KEY] = true;
+
         let timer;
 
+        const getEl = () => document.getElementById("page-loading-indicator");
+
         const show = () => {
             clearTimeout(timer);
             timer = setTimeout(() => {
-                const el = document.getElementById("page-loading-indicator");
+                const el = getEl();
                 if (el) el.classList.add("is-active");
             }, 120);
         };
 
         const hide = () => {
             clearTimeout(timer);
-            const el = document.getElementById("page-loading-indicator");
+            const el = getEl();
-            if (el) el.classList.remove("is-active");
+            if (!el) return;
+
+            requestAnimationFrame(() => {
+                requestAnimationFrame(() => {
+                    el.classList.remove("is-active");
+                });
+            });
         };
 
         document.addEventListener("astro:before-preparation", show);
         document.addEventListener("astro:page-load", hide);
-
-        hide();
     })();
 </script>
 
@@ -36,17 +46,15 @@
         height: 2rem;
         display: grid;
         place-items: center;
-        transform: 
+        transform: scale(1.3) translateY(-70px);
-            scale(1.3)
-            translateY(-70px);
         pointer-events: none;
-        transition:
+        transition: transform 160ms linear;
-            transform 160ms linear;
         z-index: 9999;
+        will-change: transform;
     }
 
     #page-loading-indicator.is-active {
-        transform: scale(1) translateY(0px);
+        transform: scale(1) translateY(0);
     }
 
     .page-loading-spinner {
@@ -71,12 +79,12 @@
         }
 
         52% {
-            transform: rotate(720deg); /* 前两圈，稍微慢一点 */
+            transform: rotate(720deg);
             animation-timing-function: cubic-bezier(0.55, 0.08, 0.78, 0.22);
         }
 
         100% {
-            transform: rotate(1080deg); /* 最后一圈更慢 */
+            transform: rotate(1080deg);
         }
     }
 
@@ -85,10 +93,4 @@
         border-color: #d8c7a1;
         border-top-color: transparent;
     }
-
-    @keyframes page-loading-spin {
-        to {
-            transform: rotate(360deg);
-        }
-    }
 </style>

src/styles/global.css

@@ -62,6 +62,12 @@ html {
   color: #1f2328;
 }
 
+html {
+  scrollbar-gutter: stable;
+  scrollbar-width: thin;
+  scrollbar-color: #828282 transparent;
+}
+
 body {
   margin: 0 auto;
   width: 100%;