From 5850b1ac878c82a33eba8ccbe56c2f524da998db Mon Sep 17 00:00:00 2001
From: wukko <me@wukko.me>
Date: Mon, 17 Mar 2025 15:29:51 +0600
Subject: [PATCH] web/layout: preload meowbalt art after the page was loaded

---
 web/src/routes/+layout.svelte | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/web/src/routes/+layout.svelte b/web/src/routes/+layout.svelte
index f624708a..28f3fdfd 100644
--- a/web/src/routes/+layout.svelte
+++ b/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}