From 8dee31ca16dc05e684f6adc7297329bfadfb954c Mon Sep 17 00:00:00 2001
From: ClovertaTheTrilobita <cloverta@petalmail.com>
Date: Mon, 13 Apr 2026 23:47:23 +0300
Subject: [PATCH] Added spinner

---
 src/components/Spinner.astro   | 95 ++++++++++++++++++++++++++++++++++
 src/components/ThemeIcon.astro |  2 +-
 src/layouts/BaseLayout.astro   |  9 +++-
 3 files changed, 104 insertions(+), 2 deletions(-)
 create mode 100644 src/components/Spinner.astro

diff --git a/src/components/Spinner.astro b/src/components/Spinner.astro
new file mode 100644
index 0000000..54a6b8f
--- /dev/null
+++ b/src/components/Spinner.astro
@@ -0,0 +1,95 @@
+<div id="page-loading-indicator" aria-hidden="true">
+    <span class="page-loading-spinner"></span>
+</div>
+
+<script is:inline>
+    (() => {
+        let timer;
+
+        const show = () => {
+            clearTimeout(timer);
+            timer = setTimeout(() => {
+                const el = document.getElementById("page-loading-indicator");
+                if (el) el.classList.add("is-active");
+            }, 120);
+        };
+
+        const hide = () => {
+            clearTimeout(timer);
+            const el = document.getElementById("page-loading-indicator");
+            if (el) el.classList.remove("is-active");
+        };
+
+        document.addEventListener("astro:before-preparation", show);
+        document.addEventListener("astro:page-load", hide);
+
+        hide();
+    })();
+</script>
+
+<style is:global>
+    #page-loading-indicator {
+        position: fixed;
+        top: 1rem;
+        right: 1rem;
+        width: 2rem;
+        height: 2rem;
+        display: grid;
+        place-items: center;
+        opacity: 0;
+        transform: scale(1.3);
+        pointer-events: none;
+        /* transition:
+            opacity 160ms ease,
+            transform 160ms ease; */
+        z-index: 9999;
+    }
+
+    #page-loading-indicator.is-active {
+        opacity: 1;
+        transform: scale(1);
+    }
+
+    .page-loading-spinner {
+        width: 1.4rem;
+        height: 1.4rem;
+        box-sizing: border-box;
+        border: 1.5px solid #7da2ff;
+        border-top-color: white;
+        border-radius: 50%;
+        background: transparent;
+        box-shadow:
+            0 0 0 1px #606060,
+            inset 0 0 0 1px #606060;
+        animation: page-loading-spin-rhythm 2.1s infinite;
+        transform-origin: center;
+    }
+
+    @keyframes page-loading-spin-rhythm {
+        0% {
+            transform: rotate(0deg);
+            animation-timing-function: cubic-bezier(0.25, 0.75, 0.35, 1);
+        }
+
+        52% {
+            transform: rotate(720deg); /* 前两圈，稍微慢一点 */
+            animation-timing-function: cubic-bezier(0.55, 0.08, 0.78, 0.22);
+        }
+
+        100% {
+            transform: rotate(1080deg); /* 最后一圈更慢 */
+        }
+    }
+
+    .dark .page-loading-spinner,
+    html.dark .page-loading-spinner {
+        border-color: #d8c7a1;
+        border-top-color: transparent;
+    }
+
+    @keyframes page-loading-spin {
+        to {
+            transform: rotate(360deg);
+        }
+    }
+</style>
diff --git a/src/components/ThemeIcon.astro b/src/components/ThemeIcon.astro
index c6774cb..259635e 100644
--- a/src/components/ThemeIcon.astro
+++ b/src/components/ThemeIcon.astro
@@ -34,7 +34,7 @@ const switchHref = "/" + segments.join("/");
         </svg>
     </button>
 
-    <a class="lang-switch" href={switchHref} data-astro-reload>
+    <a class="lang-switch" href={switchHref}>
         {switchLabel}
     </a>
 </div>
diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
index 66bacf7..6430ed4 100644
--- a/src/layouts/BaseLayout.astro
+++ b/src/layouts/BaseLayout.astro
@@ -2,8 +2,10 @@
 import Footer from "@/components/Footer.astro";
 import Header from "@/components/Header.astro";
 import { ClientRouter } from "astro:transitions";
+import { slide, fade } from "astro:transitions";
 import SEO from "@/components/SEO.astro";
 import FloatingActions from "@/components/FloatingActions.astro";
+import Spinner from "@/components/Spinner.astro";
 
 const {
 	pageTitle,
@@ -25,9 +27,14 @@ const {
 		<title>{pageTitle}</title>
 	</head>
 	<FloatingActions />
+
 	<body>
 		<Header />
-		<main class="page-content">
+		<Spinner />
+		<main
+			class="page-content"
+			transition:animate={fade({ duration: "0.05s" })}
+		>
 			<slot />
 		</main>
 		<Footer />