From 22eb05bf985535d80cf9d25fdd46a4f206bf2217 Mon Sep 17 00:00:00 2001
From: jj <log@riseup.net>
Date: Fri, 23 May 2025 10:44:51 +0000
Subject: [PATCH] web/dialog: fix meowbalt not being displayed on nojs popup

---
 web/src/components/dialog/SmallDialog.svelte | 5 ++++-
 web/src/components/misc/Meowbalt.svelte      | 5 +++--
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/web/src/components/dialog/SmallDialog.svelte b/web/src/components/dialog/SmallDialog.svelte
index 47596109..542b0684 100644
--- a/web/src/components/dialog/SmallDialog.svelte
+++ b/web/src/components/dialog/SmallDialog.svelte
@@ -39,7 +39,10 @@
     >
         {#if meowbalt}
             <div class="meowbalt-container">
-                <Meowbalt emotion={meowbalt} />
+                <Meowbalt
+                    emotion={meowbalt}
+                    forceLoaded={id === 'nojs-dialog'}
+                />
             </div>
         {/if}
         <div class="dialog-inner-container">
diff --git a/web/src/components/misc/Meowbalt.svelte b/web/src/components/misc/Meowbalt.svelte
index 7b31c297..fb2f244b 100644
--- a/web/src/components/misc/Meowbalt.svelte
+++ b/web/src/components/misc/Meowbalt.svelte
@@ -4,16 +4,17 @@
 
     type Props = {
         emotion: MeowbaltEmotions;
+        forceLoaded?: boolean;
     };
 
-    const { emotion }: Props = $props();
+    const { emotion, forceLoaded }: Props = $props();
 
     let loaded = $state(false);
 </script>
 
 <img
     class="meowbalt {emotion}"
-    class:loaded
+    class:loaded={loaded || forceLoaded}
     onload={() => (loaded = true)}
     src="/meowbalt/{emotion}.png"
     height="152"