Merge pull request #3 from idkncc/feat/skeleton-elements

feat: skeleton elements

src/css/main.scss

@@ -64,3 +64,22 @@ input.control-input {
     @apply border-amber-700 bg-amber-950;
   }
 }
+
+.placeholder {
+  display: inline-block;
+  min-height: 1em;
+  vertical-align: middle;
+  cursor: wait;
+  background-color: currentcolor;
+  opacity: .5;
+
+  mask-image: linear-gradient(130deg,#000 55%,rgba(0,0,0,0.8) 75%,#000 95%);
+  mask-size: 200% 100%;
+  animation: placeholder-wave 2s linear infinite;
+}
+
+@keyframes placeholder-wave {
+  100% {
+    mask-position: -200% 0%;
+  }
+}

src/lib/components/Cards/FriendCardSkeleton.svelte

@@ -0,0 +1,54 @@
+<div class="friend-card">
+    <div class="friend-image">
+        <div
+            class="placeholder rounded-lg"
+            style="width: 90px; height: 90px;"
+        />
+    </div>
+
+    <div class="friend-username">
+        <p class="user-name text-center">
+            <span class="placeholder w-full rounded-lg" style="width: 70px" />
+        </p>
+    </div>
+</div>
+
+<style lang="scss">
+    .friend-card {
+        --size: 100px;
+
+        @media screen and (max-width: 920px) {
+            --size: 80px;
+        }
+
+        @apply flex flex-col;
+
+        .friend-image {
+            min-width: var(--size);
+            min-height: var(--size);
+
+            @apply aspect-square;
+            @apply rounded-full relative;
+
+            img {
+                @apply w-full rounded-full;
+            }
+        }
+
+        div.friend-username {
+            @apply text-xs text-center;
+            @apply flex gap-1 justify-center;
+
+            width: var(--size);
+
+            .user-name {
+                max-width: calc(var(--size) - 10px);
+                @apply truncate;
+            }
+
+            .user-status {
+                @apply w-fit;
+            }
+        }
+    }
+</style>

src/lib/components/Cards/GameCardSkeleton.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+    import type { Recommendation, TreatmentType } from "$lib/typings.ts";
+</script>
+
+<div class="game-card w-full" data-treatment-type={"Carousel"}>
+    <div class="game-image rounded-md placeholder" />
+
+    <p class="game-title"><span class="placeholder w-20" /></p>
+    <p class="game-playing"><span class="placeholder w-12" /></p>
+</div>
+
+<style lang="scss">
+    .game-card {
+        @apply min-w-[120px];
+        @apply cursor-pointer;
+
+        .game-title {
+            @apply max-w-[120px] max-h-[52px] text-sm truncate;
+        }
+
+        .game-playing {
+            @apply text-[#C0C0C0] text-xs;
+        }
+    }
+
+    .game-card[data-treatment-type="Carousel"] {
+        .game-image {
+            @apply w-[120px] h-[120px];
+        }
+    }
+
+    .game-card[data-treatment-type="SortlessGrid"] {
+        .game-image {
+            @apply min-w-[120px] min-h-[120px];
+
+            width: 100%;
+            aspect-ratio: 16 / 9;
+        }
+    }
+</style>

src/lib/components/GameTabs/GameServerItem.svelte

@@ -14,11 +14,17 @@
 <div class="game-server">
     <div class="game-server-avatars">
         {#each gameServer.player_tokens as playerToken}
-            <img
-                class="bg-[#282828]"
-                src={avatarUrls[playerToken] ?? "https://placehold.co/512"}
-                alt="Player Headshot"
-            />
+            {#if avatarUrls[playerToken]}
+                <img
+                    class="avatar-image"
+                    src={avatarUrls[playerToken]}
+                    alt="Player Headshot"
+                />
+            {:else}
+                <div
+                    class="placeholder avatar-image w-full h-full aspect-square"
+                />
+            {/if}
         {/each}
 
         {#if gameServer.playing > 5}
@@ -43,9 +49,13 @@
             @apply grid grid-cols-3 justify-items-center gap-2;
             @apply mb-2;
 
-            img {
+            .avatar-image {
                 @apply rounded-md;
             }
+
+            img.avatar-image {
+                @apply bg-[#282828];
+            }
         }
 
         .game-server-join {

src/routes/+page.svelte

@@ -3,16 +3,16 @@
     import chunk from "lodash.chunk";
 
     import FriendCard from "$lib/components/Cards/FriendCard.svelte";
+    import FriendCardSkeleton from "$lib/components/Cards/FriendCardSkeleton.svelte";
     import GameCard from "$lib/components/Cards/GameCard.svelte";
+    import GameCardSkeleton from "$lib/components/Cards/GameCardSkeleton.svelte";
 
     import {
         TreatmentType,
         ThumbnailSize,
         ThumbnailType,
         type InternalFriend,
-        type FriendUserInformation,
         type RecommendationsTopic,
-        type UserPresence,
     } from "$lib/typings.js";
 
     let friends: InternalFriend[] = [];
@@ -144,7 +144,9 @@
     <p class="section-title">Friends</p>
     <div class="section-content">
         {#await fetchFriends()}
-            TODO: skeleton elements
+            {#each Array(8).map(() => 0) as _}
+                <FriendCardSkeleton />
+            {/each}
         {:then}
             {#each friends as friend}
                 <FriendCard {friend} />
@@ -154,7 +156,16 @@
 </section>
 
 {#await fetchRecommendations()}
-    TODO: skeleton elements
+    {#each Array(8).map(() => 0) as _}
+        <section class="topic-section">
+            <p class="section-title"><span class="placeholder w-28" /></p>
+            <div class="section-content carousel">
+                {#each Array(10).map(() => 0) as _}
+                    <GameCardSkeleton />
+                {/each}
+            </div>
+        </section>
+    {/each}
 {:then}
     {#each topics as topic}
         <section class="topic-section">

src/routes/game/+page.svelte

@@ -56,14 +56,12 @@
     }
 </script>
 
-{#await fetchGameDetails()}
-    TOOD: skeleton elements
-{:then _}
+{#await fetchGameDetails() then _}
     <main class="game-page">
         <div class="game-header grid grid-cols-2 gap-4">
             <div class="game-images">
                 {#await fetchGameMedia()}
-                    TODO: skeleton elements
+                    <div class="placeholder rounded-lg w-full aspect-video" />
                 {:then [gameMedia, gameMediaUrls]}
                     <swiper-container
                         navigation="true"