gb/mercury
Template
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Activity Actions

feat: add a spinner when SPA mode is enabled

Browse source
This commit is contained in:
草师傅 2025-10-02 17:36:13 +08:00
parent e7f889f1f8
commit a321501977
Signed by: gb
GPG key ID: 43330A030E2D6478
3 changed files with 49 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/components/helper/spa/SPARouter.astro Normal file
View file

@ -0,0 +1,4 @@
---
import { ClientRouter } from "astro:transitions";
---
<ClientRouter />

41
src/components/helper/spa/Spinner.astro Normal file
View file

@ -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>

6
src/layouts/Layout.astro
View file

@ -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 />