From e0b331b0605bc27fdb6697742efe05b13063d6b0 Mon Sep 17 00:00:00 2001
From: Kuba Suder <jakub.suder@gmail.com>
Date: Mon, 6 Jul 2026 04:58:57 +0200
Subject: [PATCH] some visual tweaks in the gif player

---
 src/components/embeds/GIFPlayer.svelte | 46 +++++++++++++++++---------
 1 file changed, 31 insertions(+), 15 deletions(-)

diff --git a/src/components/embeds/GIFPlayer.svelte b/src/components/embeds/GIFPlayer.svelte
index ccb3455..955af07 100644
--- a/src/components/embeds/GIFPlayer.svelte
+++ b/src/components/embeds/GIFPlayer.svelte
@@ -43,26 +43,33 @@
   }
 </script>
 
-{#if !showsPlaceholder}
-  <div class="gif">
-    <button class="gif-toggle" type="button" aria-label={paused ? 'Play GIF' : 'Pause GIF'} {onclick}>
+<div class="gif-player">
+  {#if showsPlaceholder || !loaded}
+    <button type="button" onclick={showGIF} class="placeholder {showsPlaceholder ? '' : 'loading'}">
+      <h2>GIF</h2>
+      <p class="alt">{altText}</p>
+    </button>
+  {/if}
+
+  {#if !showsPlaceholder}
+    <button type="button" class="gif-wrapper" class:loading={!loaded} {onclick}
+      aria-label={paused ? 'Play GIF' : 'Pause GIF'}>
+
       <img src={paused ? staticURL : gifURL}
         class={paused ? 'static' : ''}
         alt={title ? `GIF: ${title}` : "GIF animation"}
         {onload}
-        style:opacity={loaded ? 1 : 0}
         style:max-width="{maxWidth}px"
         style:max-height="{maxHeight}px">
     </button>
-  </div>
-{:else}
-  <button class="placeholder" type="button" onclick={showGIF}>
-    <h2>GIF</h2>
-    <p class="alt">{altText}</p>
-  </button>
-{/if}
+  {/if}
+</div>
 
 <style>
+  .gif-player {
+    position: relative;
+  }
+
   .placeholder {
     appearance: none;
     display: block;
@@ -81,6 +88,10 @@
     border: 1px solid #c8c8c8;
   }
 
+  .placeholder.loading {
+    visibility: hidden;
+  }
+
   .placeholder h2 {
     color: #666;
     font-size: 11pt;
@@ -98,7 +109,7 @@
     white-space: pre-line;
   }
 
-  .gif-toggle {
+  .gif-wrapper {
     appearance: none;
     background: none;
     border: 0;
@@ -106,13 +117,18 @@
     cursor: pointer;
   }
 
-  .gif img {
+  .gif-wrapper.loading {
+    position: absolute;
+    opacity: 0;
+  }
+
+  .gif-wrapper img {
     user-select: none;
     -webkit-user-select: none;
   }
 
-  .gif img.static {
-    opacity: 0.75;
+  .gif-wrapper img.static {
+    opacity: 0.8;
   }
 
   @media (prefers-color-scheme: dark) {
-- 
2.51.2