web/changelogs: display skeleton when changelog is loading

web/src/components/changelog/ChangelogEntry.svelte

@@ -1,9 +1,13 @@
 <script lang="ts">
+    import Skeleton from "$components/misc/Skeleton.svelte";
+
     export let version: string;
     export let title: string;
     export let date: string | undefined;
     export let banner: { file: string; alt: string } | undefined;
 
+    let bannerLoaded = false;
+
     const formatDate = (dateString: string) => {
         const date = new Date(dateString);
 
@@ -34,8 +38,15 @@
             <img
                 src={`/update-banners/${banner.file}`}
                 alt={banner.alt}
+                class:loading={!bannerLoaded}
+                on:load={() => bannerLoaded = true}
                 class="changelog-banner"
             />
+
+            <Skeleton
+                class="big changelog-banner"
+                hidden={bannerLoaded}
+            />
         {/if}
         <div class="contents">
             <slot></slot>
@@ -90,7 +101,7 @@
         -webkit-user-select: text
     }
 
-    .changelog-banner {
+    :global(.changelog-banner) {
         display: block;
         object-fit: cover;
         max-height: 320pt;
@@ -101,6 +112,10 @@
         border-radius: var(--padding);
     }
 
+    :global(.changelog-banner.loading) {
+        display: none;
+    }
+
     .changelog-content {
         display: flex;
         flex-direction: column;