diff options
| author | axtloss <axtlos@disroot.org> | 2024-08-20 23:22:50 +0200 |
|---|---|---|
| committer | axtloss <axtlos@disroot.org> | 2024-08-20 23:22:50 +0200 |
| commit | b6c6b705c15ff02e26eb5463a8b1550fa131ee38 (patch) | |
| tree | 7767ce76ac88b27a30721b0ca71f4fe7c1ea8cf0 /src | |
| parent | 7890c18787e41ee3e69248dfecfc419eab020383 (diff) | |
| download | website-b6c6b705c15ff02e26eb5463a8b1550fa131ee38.tar.gz website-b6c6b705c15ff02e26eb5463a8b1550fa131ee38.tar.bz2 | |
add loader for long loading pages
Diffstat (limited to '')
| -rw-r--r-- | src/app.html | 1 | ||||
| -rw-r--r-- | src/lib/navigation.ts | 13 | ||||
| -rw-r--r-- | src/routes/+layout.js | 1 | ||||
| -rw-r--r-- | src/routes/+page.svelte | 1 | ||||
| -rw-r--r-- | src/routes/+page.ts | 2 | ||||
| -rw-r--r-- | src/routes/Header.svelte | 35 | ||||
| -rw-r--r-- | src/routes/projects/+page.svelte | 2 | ||||
| -rw-r--r-- | src/routes/projects/+page.ts | 8 |
8 files changed, 38 insertions, 25 deletions
diff --git a/src/app.html b/src/app.html index 5862a66..adf8bd8 100644 --- a/src/app.html +++ b/src/app.html @@ -2,7 +2,6 @@ <html lang="en"> <head> <meta charset="utf-8" /> - <link rel="icon" href="%sveltekit.assets%/favicon.gif" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> %sveltekit.head% </head> diff --git a/src/lib/navigation.ts b/src/lib/navigation.ts new file mode 100644 index 0000000..c759d97 --- /dev/null +++ b/src/lib/navigation.ts @@ -0,0 +1,13 @@ +import { derived } from 'svelte/store'; +import { navigating } from '$app/stores'; + +let timer: ReturnType<typeof setTimeout> = null; +export const isNavigating = derived(navigating, (newValue, set) => { + if (timer) { + clearTimeout(timer); + } + if (newValue) { + timer = setTimeout(() => set(true), 500); + } + set(false); +}); diff --git a/src/routes/+layout.js b/src/routes/+layout.js new file mode 100644 index 0000000..b40fb51 --- /dev/null +++ b/src/routes/+layout.js @@ -0,0 +1 @@ +export const ssr = true diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index f7fddd5..e6b76c0 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -7,7 +7,6 @@ import { isMobile } from "$lib/mobile"; import { browser } from "$app/environment"; - const header = getContext<Header>("Header"); var description = [ diff --git a/src/routes/+page.ts b/src/routes/+page.ts index a72419a..189f71e 100644 --- a/src/routes/+page.ts +++ b/src/routes/+page.ts @@ -1,3 +1 @@ -// since there's no dynamic data here, we can prerender -// it so that it gets served as a static asset in production export const prerender = true; diff --git a/src/routes/Header.svelte b/src/routes/Header.svelte index 0366e6d..d343a17 100644 --- a/src/routes/Header.svelte +++ b/src/routes/Header.svelte @@ -1,7 +1,4 @@ <script context="module" lang="ts"> - import { type ComponentType, SvelteComponent} from "svelte"; - var showmsg: boolean = false; - export type Header = { addMessage (message: string, options?: Partial<MessageOptions>): void }; @@ -28,10 +25,11 @@ import { setContext } from "svelte"; import { fly } from "svelte/transition"; import { readable, writable } from "svelte/store"; + import { isNavigating } from "$lib/navigation.ts"; const newestMessage = writable<HeaderMessage|null>(null); - const rose = chrome ? boowomp : logo; + const Rose = chrome ? boowomp : logo; const currentMessage = writable<HeaderMessage|null>(null, (set) => { let $currentMessage: HeaderMessage|null = null; @@ -84,7 +82,11 @@ <header> <div class="corner"> <a href="/" class="name"> - <img id="logo" src={rose} alt="rose"/> + {#if $isNavigating} + <span class="loader"></span> + {:else} + <img id="logo" src={Rose} alt="rose"/> + {/if} <p>rose</p> </a> </div> @@ -143,6 +145,22 @@ padding-bottom: 6px; } + .loader { + width: 1.5em; + height: 1.5em; + border: 5px solid transparent; + border-bottom-color: #E2122D; + border-radius: 50%; + display: inline-block; + box-sizing: border-box; + animation: rotation 1s linear infinite; + } + + @keyframes rotation { + 0% { transform: rotate(0deg); } + 100% { transform: rotate(360deg); } + } + .corner { height: 3em; margin-bottom: 0px; @@ -173,13 +191,6 @@ object-fit: contain; } - & img { - width: 1.5em; - height: 1.5em; - object-fit: contain; - - } - } .center { diff --git a/src/routes/projects/+page.svelte b/src/routes/projects/+page.svelte index dbe5516..05c013f 100644 --- a/src/routes/projects/+page.svelte +++ b/src/routes/projects/+page.svelte @@ -16,7 +16,7 @@ <ProjectEntry name={'BVG - Basic Vector Graphics'} description={'Custom made vector graphic format for use with FsVerify, the parser (fbwarn) is written in C using raylib'} projType={'Personal Project'} link={'https://github.com/axtloss/fsverify/tree/main/fbwarn'}> - <img src="/bvg.png" alt="The FsVerify logo drawn with BVG"/> + <img src='/bvg.png' alt="The FsVerify logo drawn with BVG"/> </ProjectEntry> <ProjectEntry name={'vib'} description={'Building docker images using yaml recipes, written in golang'} diff --git a/src/routes/projects/+page.ts b/src/routes/projects/+page.ts index e739ef4..189f71e 100644 --- a/src/routes/projects/+page.ts +++ b/src/routes/projects/+page.ts @@ -1,9 +1 @@ -import { dev } from '$app/environment'; - -// we don't need any JS on this page, though we'll load -// it in dev so that we get hot module replacement -export const csr = dev; - -// since there's no dynamic data here, we can prerender -// it so that it gets served as a static asset in production export const prerender = true; |