web/ChangelogEntry: refactor to svelte 5 style, fade in banner

web/src/components/changelog/ChangelogEntry.svelte

@@ -1,17 +1,22 @@
 <script lang="ts">
-    import { onMount } from "svelte";
+    import { onMount, type Snippet } from "svelte";
-
     import type { Optional } from "$lib/types/generic";
 
     import Skeleton from "$components/misc/Skeleton.svelte";
 
-    export let version: string;
+    type Props = {
-    export let title: string = "";
+        version: string;
-    export let date: string = "";
+        title?: string;
-    export let banner: Optional<{ file: string; alt: string }> = undefined;
+        date?: string;
-    export let skeleton = false;
+        banner?: Optional<{ file: string; alt: string }>;
+        skeleton?: boolean;
+        children?: Snippet
+    };
 
-    let bannerLoaded = false;
+    const { version, title, date, banner, skeleton, children }: Props = $props();
+
+    let bannerLoaded = $state(false);
+    let hideSkeleton = $state(false);
 
     const formatDate = (dateString: string) => {
         const date = new Date(dateString);
@@ -26,6 +31,15 @@
         ].join(" ");
     };
 
+    const loaded = () => {
+        bannerLoaded = true;
+
+        // remove the skeleton after the image is done fading in
+        setTimeout(() => {
+            hideSkeleton = true;
+        }, 200)
+    }
+
     onMount(() => {
         const to_focus: HTMLElement | null =
             document.querySelector("[data-first-focus]");
@@ -46,7 +60,7 @@
             <div class="changelog-date">
                 {#if skeleton}
                     <Skeleton width="8em" height="16px" />
-                {:else}
+                {:else if date}
                     {formatDate(date)}
                 {/if}
             </div>
@@ -59,15 +73,16 @@
     </div>
     <div class="changelog-content">
         {#if banner}
+            <div class="changelog-banner-container">
                 <img
                     src={`/update-banners/${banner.file}`}
                     alt={banner.alt}
                     class:loading={!bannerLoaded}
-                on:load={() => bannerLoaded = true}
+                    onload={loaded}
                     class="changelog-banner"
                 />
-
+                <Skeleton class="big changelog-banner" hidden={hideSkeleton} />
-            <Skeleton class="big changelog-banner" hidden={bannerLoaded} />
+            </div>
         {/if}
 
         {#if skeleton}
@@ -84,7 +99,7 @@
                     </p>
                 {/each}
             {:else}
-                <slot></slot>
+                {@render children?.()}
             {/if}
         </div>
     </div>
@@ -137,19 +152,37 @@
         -webkit-user-select: text;
     }
 
-    :global(.changelog-banner) {
+    .changelog-banner-container {
-        display: block;
         object-fit: cover;
         max-height: 350pt;
         min-height: 180pt;
         width: 100%;
         aspect-ratio: 16/9;
+        position: relative;
+    }
+
+    :global(.changelog-banner) {
+        object-fit: cover;
+        width: 100%;
+        height: 100%;
+        aspect-ratio: 16/9;
         border-radius: var(--padding);
         pointer-events: all;
+
+        opacity: 1;
+        transition: opacity 0.15s;
+
+        position: absolute;
+        z-index: 2;
+    }
+
+    :global(.skeleton.changelog-banner) {
+        z-index: 1;
+        position: relative;
     }
 
     .changelog-banner.loading {
-        display: none;
+        opacity: 0;
     }
 
     .changelog-content {