diff --git a/src/components/helper/spa/SPARouter.astro b/src/components/helper/spa/SPARouter.astro
new file mode 100644
index 0000000..688e06e
--- /dev/null
+++ b/src/components/helper/spa/SPARouter.astro
@@ -0,0 +1,4 @@
+---
+import { ClientRouter } from "astro:transitions";
+---
+<ClientRouter />
\ No newline at end of file
diff --git a/src/components/helper/spa/Spinner.astro b/src/components/helper/spa/Spinner.astro
new file mode 100644
index 0000000..5913186
--- /dev/null
+++ b/src/components/helper/spa/Spinner.astro
@@ -0,0 +1,41 @@
+---
+
+---
+<div id="spinner-container">
+    <div class="spinner"></div>
+    <span>Loading...</span>
+</div>
+
+<style>
+    #spinner-container {
+        display: none;
+        gap: 1rem;
+        margin: 1rem 0;
+    }
+    .spinner:after {
+        animation: changeContent .8s linear infinite;
+        display: block;
+        content: "⠋";
+    }
+
+    @keyframes changeContent {
+        10% { content: "⠙"; }
+        20% { content: "⠹"; }
+        30% { content: "⠸"; }
+        40% { content: "⠼"; }
+        50% { content: "⠴"; }
+        60% { content: "⠦"; }
+        70% { content: "⠧"; }
+        80% { content: "⠇"; }
+        90% { content: "⠏"; }
+    }
+</style>
+<script is:inline>
+    const spinner = document.getElementById("spinner-container");
+    document.addEventListener("astro:before-preparation", () => {
+            spinner.style.display = 'flex';
+    });
+    document.addEventListener("astro:after-preparation", () => {
+            spinner.style.display = 'none';
+    });
+</script>
\ No newline at end of file
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index e1b69fd..56f78d0 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -18,8 +18,9 @@ interface Props {
   ogImage?: string;
 }
 
-import { ClientRouter } from "astro:transitions";
 import PoweredBy from "../components/PoweredBy.astro";
+import SPARouter from "../components/helper/spa/SPARouter.astro";
+import Spinner from "../components/helper/spa/Spinner.astro";
 const spaEnabled = siteConfig.spa
 
 const noscript = siteConfig.noClientJavaScript
@@ -47,7 +48,7 @@ const { title = pageTitle, author = siteConfig.defaultAuthor.name,description =
     <meta name="generator" content={Astro.generator} />
     <Meta title={pageTitle} author={author} description={description} ogImage={ogImage} />
     <title>{pageTitle}</title>
-    {spaEnabled && <ClientRouter fallback="animate" />}
+    {spaEnabled && <SPARouter />}
     <!--transitional animation is broken in firefox though-->
   </head>
   <body class="container">
@@ -58,6 +59,7 @@ const { title = pageTitle, author = siteConfig.defaultAuthor.name,description =
               </div>
               <Navbar />
               <Search />
+              {spaEnabled && <Spinner />}
         </header>
         <main class="content-box">
               <slot />
