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

web/src/routes/+layout.svelte

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