Accords-Library-Archive
/
v3.accords-library.com
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Added a spinner during loading state

This commit is contained in:
DrMint 2024-03-10 14:48:47 +01:00
parent 612e92df82
commit 108d150d98
3 changed files with 71 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
src/components/AppLayout/components/AppLayoutSpinner.astro Normal file
View File

@ -0,0 +1,66 @@
---
import { Icon } from "astro-icon/components";
import { getI18n } from "src/i18n/i18n";
const { t } = await getI18n(Astro.locals.currentLocale);
---
{/* ------------------------------------------- HTML ------------------------------------------- */}
<div id="app-layout-spinner"><Icon name="accords" /><p>{t("global.loading")}</p></div>
{/* ------------------------------------------- CSS -------------------------------------------- */}
<style>
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(720deg);
}
}
#app-layout-spinner {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
place-content: center;
place-items: center;
gap: 1em;
background-color: color-mix(in srgb, var(--color-elevation-0) 90%, transparent);
z-index: 9999;
transition-duration: 1s;
transition-property: opacity;
transition-delay: 500ms;
touch-action: none;
pointer-events: none;
user-select: none;
display: grid;
opacity: 0;
&.show {
opacity: 1;
}
& > svg {
animation: spin 2s infinite ease;
width: 10vmin;
height: 10vmin;
}
}
</style>
{/* ------------------------------------------- JS --------------------------------------------- */}
<script is:inline>
document.addEventListener("astro:before-preparation", () => {
document.querySelector("#app-layout-spinner").classList.add("show");
});
document.addEventListener("astro:after-preparation", () => {
document.querySelector("#app-layout-spinner").classList.remove("show");
});
</script>

3
src/components/AppLayout/components/Html.astro
View File

@ -4,6 +4,7 @@ import { ViewTransitions } from "astro:transitions";
import "@fontsource-variable/vollkorn"; import "@fontsource-variable/vollkorn";
import "@fontsource-variable/murecho"; import "@fontsource-variable/murecho";
import { getI18n } from "src/i18n/i18n"; import { getI18n } from "src/i18n/i18n";
import AppLayoutSpinner from "./AppLayoutSpinner.astro";
interface Props { interface Props {
openGraph?: openGraph?:
@ -116,6 +117,8 @@ const { currentTheme } = Astro.locals;
<body> <body>
<slot /> <slot />
</body> </body>
<AppLayoutSpinner />
</html> </html>
{/* ------------------------------------------- CSS -------------------------------------------- */} {/* ------------------------------------------- CSS -------------------------------------------- */}

3
src/i18n/wordings-keys.ts
View File

@ -83,4 +83,5 @@ export type WordingKey =
| "header.nav.parentPages.collections.folder" | "header.nav.parentPages.collections.folder"
| "header.nav.parentPages.collections.collectible" | "header.nav.parentPages.collections.collectible"
| "header.nav.parentPages.tooltip" | "header.nav.parentPages.tooltip"
| "global.meta.description"; | "global.meta.description"
| "global.loading";