web/layout: preload meowbalt art after the page was loaded

This commit is contained in:
wukko 2025-03-17 15:29:51 +06:00
parent 97fee5e6d4
commit 5850b1ac87
No known key found for this signature in database
GPG Key ID: 3E30B3F26C7B4AA2

View File

@ -3,6 +3,7 @@
import "@fontsource/ibm-plex-mono/400-italic.css"; import "@fontsource/ibm-plex-mono/400-italic.css";
import "@fontsource/ibm-plex-mono/500.css"; import "@fontsource/ibm-plex-mono/500.css";
import { onMount } from "svelte";
import { page } from "$app/stores"; import { page } from "$app/stores";
import { updated } from "$app/stores"; import { updated } from "$app/stores";
import { browser } from "$app/environment"; import { browser } from "$app/environment";
@ -34,6 +35,8 @@
$settings.accessibility.reduceTransparency || $settings.accessibility.reduceTransparency ||
device.prefers.reducedTransparency; device.prefers.reducedTransparency;
$: preloadMeowbalt = false;
afterNavigate(async () => { afterNavigate(async () => {
const to_focus: HTMLElement | null = const to_focus: HTMLElement | null =
document.querySelector("[data-first-focus]"); document.querySelector("[data-first-focus]");
@ -43,6 +46,10 @@
await getServerInfo(); await getServerInfo();
} }
}); });
onMount(() => {
preloadMeowbalt = true;
});
</script> </script>
<svelte:head> <svelte:head>
@ -75,7 +82,9 @@
data-theme={browser ? $currentTheme : undefined} data-theme={browser ? $currentTheme : undefined}
lang={$locale} lang={$locale}
> >
{#if preloadMeowbalt}
<div id="preload-meowbalt" aria-hidden="true"></div> <div id="preload-meowbalt" aria-hidden="true"></div>
{/if}
<div <div
id="cobalt" id="cobalt"
class:loaded={browser} class:loaded={browser}