src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Components/GameRow.razor

@@ -37,5 +37,5 @@
         <span class="max-value">/5</span>
     </div>
 
-    <button class="detail">@Icons.Search.Triangle</button>
+    <button class="detail">@Icons.Triangle</button>
 </div>

src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Components/GameRowSkeleton.razor

@@ -0,0 +1,36 @@
+@using GameIdeas.BlazorApp.Helpers
+@using GameIdeas.BlazorApp.Shared.Constants
+
+<div class="row">
+    <div class="icon">@Icons.Game</div>
+
+    <div class="title"></div>
+
+    <span class="release-date">@ResourcesKey.Unknown</span>
+
+    <div class="platforms">
+        <div class="pill"></div>
+        <div class="pill pill-sm"></div>
+        <div class="pill pill-lg"></div>
+    </div>
+
+    <div class="tags">
+        <div class="pill"></div>
+        <div class="pill lg-pill"></div>
+    </div>
+
+    <span class="storage">10.0 Go</span>
+
+    <div class="interest">
+        <span class="value" style="@($"color: var({GameHelper.GetInterestColor(Interest, 5)})")">
+            @Interest
+        </span>
+        <span class="max-value">/5</span>
+    </div>
+
+    <button class="detail">@Icons.Triangle</button>
+</div>
+
+@code {
+    private int Interest = @Random.Shared.Next(1, 5);
+}

src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Components/GameRowSkeleton.razor.css

@@ -0,0 +1,111 @@
+.row {
+    display: grid;
+    grid-template-columns: auto 3fr 70px 2fr 3fr 60px 30px 30px;
+    grid-gap: 8px;
+    height: 64px;
+    background: var(--input-secondary);
+    box-shadow: var(--drop-shadow);
+    border-radius: var(--big-radius);
+    align-items: center;
+    overflow: hidden;
+}
+
+.row * {
+    max-height: 64px;
+    height: fit-content;
+    padding: 6px 0;
+    box-sizing: border-box;
+}
+
+.icon {
+    border-radius: var(--small-radius);
+    padding: 4px;
+    margin: 8px;
+    height: 48px;
+    width: 48px;
+    animation: loading 3s ease infinite;
+}
+
+.icon ::deep svg {
+    fill: var(--input-secondary);
+}
+
+.title {
+    border-radius: var(--small-radius);
+    animation: loading 3s ease infinite;
+    width: 160px;
+    height: 24px;
+    padding: 6px;
+    border-radius: var(--small-radius);
+}
+
+.release-date, .storage, .max-value {   
+    color: rgb(184, 184, 184);
+}
+
+.pill {
+    width: 60px;
+    height: 24px;
+    padding: 0 6px;
+    border-radius: var(--small-radius);
+    align-content: center;
+    animation: loading 3s ease infinite;
+}
+
+.pill-lg {
+    width: 80px;
+}
+
+.pill-sm {
+    width: 40px;
+}
+
+.platforms, .tags {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 4px;
+}
+
+.detail {
+    transform: scale(0.6, 1) rotate(-90deg);
+    background: none;
+    border: none;
+    outline: none;
+    cursor: pointer;
+}
+
+::deep .detail svg {
+    fill: var(--white);
+}
+
+.value {
+    font-size: 24px;
+    font-weight: bold;
+}
+
+.max-value {
+    position: absolute;
+    transform: translate(2px, 10px);
+}
+
+@media screen and (max-width: 1000px) {
+    .row {
+        grid-template-columns: 48px 3fr 2fr 3fr 30px 30px;
+    }
+
+    .tags, .storage {
+        display: none;
+    }
+}
+
+@keyframes loading {
+    0% {
+        background: rgb(255, 255, 255, 0.05);
+    }
+    50% {
+        background: rgb(255, 255, 255, 0.2);
+    }
+    100% {
+        background: rgb(255, 255, 255, 0.05);
+    }
+}

src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Game.razor

@@ -19,10 +19,21 @@
 
 <div class="container">
     <div class="content">
+        @if (!IsLoading)
+        {
             @foreach (var game in GamesDto)
             {
                 <GameRow GameDto="game" />
             }
+        }
+        else
+        {
+            @for (int i = 0; i < 20; i++)
+            {
+                <GameRowSkeleton />
+            }
+        }
+
     </div>
 
     <AdvancedGameFilter @bind-GameFilter=GameFilter Categories="Categories" />

src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Game.razor.cs

@@ -3,7 +3,6 @@ using GameIdeas.BlazorApp.Shared.Components.Popup;
 using GameIdeas.BlazorApp.Shared.Models;
 using GameIdeas.Shared.Dto;
 using Microsoft.AspNetCore.Components;
-using System.Net.Http.Headers;
 
 namespace GameIdeas.BlazorApp.Pages.Games;
 
@@ -14,7 +13,7 @@ public partial class Game
     private DisplayType DisplayType = DisplayType.List;
     private GameFilterDto GameFilter = new();
     private Popup? ManualAddPopup;
-    private bool IsLoading;
+    private bool IsLoading = false;
     private CategoriesDto? Categories;
     private IEnumerable<GameDto> GamesDto = [];
 

src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Popup/Popup.razor

@@ -8,7 +8,7 @@
             <div class="popup-content">
                 @if (Closable)
                 {
-                    <button @onclick="HandleBackdropFilterClicked">@Icons.Shared.Close</button>
+                    <button @onclick="HandleBackdropFilterClicked">@Icons.Close</button>
                 }
                 @ChildContent
             </div>

src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Search/SearchInput.razor

@@ -17,7 +17,7 @@
         @if (!string.IsNullOrEmpty(Text))
         {
             <div class="clear-icon" @onclick=HandleClearClicked>
-                @Icons.Shared.Close;
+                @Icons.Close;
             </div>
         }
 

src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Search/SearchInput.razor.cs

@@ -57,8 +57,8 @@ public partial class SearchInput
     {
         return Icon switch
         {
-            SearchInputIcon.Dropdown => Icons.Search.Triangle,
-            SearchInputIcon.Search => Icons.Search.Glass,
+            SearchInputIcon.Dropdown => Icons.Triangle,
+            SearchInputIcon.Search => Icons.Glass,
             _ => new MarkupString()
         };
     }

src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Constants/Icons.cs

@@ -8,8 +8,6 @@ public static class Icons
     private const string CloseBraket = "</svg>";
 
 
-    public static class Search
-    {
     public readonly static MarkupString Glass = new(OpenBraket +
         "<path d=\"M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z\" />" +
         CloseBraket);
@@ -17,12 +15,12 @@ public static class Icons
     public readonly static MarkupString Triangle = new(OpenBraket +
         "<path d=\"M1 3H23L12 22\" />" +
         CloseBraket);
-    }
     
-    public static class Shared
-    {
     public readonly static MarkupString Close = new(OpenBraket +
         "<path d=\"M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z\" />" +
         CloseBraket);
-    }
+
+    public readonly static MarkupString Game = new(OpenBraket +
+        "<path d=\"M6,7H18A5,5 0 0,1 23,12A5,5 0 0,1 18,17C16.36,17 14.91,16.21 14,15H10C9.09,16.21 7.64,17 6,17A5,5 0 0,1 1,12A5,5 0 0,1 6,7M19.75,9.5A1.25,1.25 0 0,0 18.5,10.75A1.25,1.25 0 0,0 19.75,12A1.25,1.25 0 0,0 21,10.75A1.25,1.25 0 0,0 19.75,9.5M17.25,12A1.25,1.25 0 0,0 16,13.25A1.25,1.25 0 0,0 17.25,14.5A1.25,1.25 0 0,0 18.5,13.25A1.25,1.25 0 0,0 17.25,12M5,9V11H3V13H5V15H7V13H9V11H7V9H5Z\">" +
+        CloseBraket);
 }