Fix wrong comportment

src/GameIdeas/Client/GameIdeas.BlazorApp/Layouts/MainLayout.razor

@@ -3,4 +3,10 @@
 
 <div class="page">
     @Body
+</div>
+
+<div class="background">
+    <span class="orb red"></span>
+    <span class="orb blue"></span>
+    <span class="orb green"></span>
 </div>

src/GameIdeas/Client/GameIdeas.BlazorApp/Layouts/MainLayout.razor.css

@@ -2,4 +2,47 @@
     display: flex;
     flex-direction: column;
     height: 100%;
+}
+
+.orb {
+    position: absolute;
+    border-radius: 100%;
+    z-index: var(--index-orb);
+}
+
+.green {
+    width: 80vh;
+    height: 80vh;
+    top: -20vh;
+    background: #315941;
+    filter: blur(30vh);
+}
+
+.blue {
+    width: 80vw;
+    height: 80vw;
+    left: 10vw;
+    top: 50vh;
+    background: #3A4156;
+    filter: blur(30vh);
+}
+
+.red {
+    width: 100vh;
+    height: 100vh;
+    left: 60vw;
+    top: -40vh;
+    background: #593533;
+    filter: blur(30vh);
+}
+
+.background {
+    height: 100vh;
+    width: 100vw;
+    background: var(--background);
+    position: fixed;
+    overflow: hidden;
+    top: 0;
+    left: 0;
+    z-index: var(--index-background);
 }

src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Detail/GameDetail.razor.cs

@@ -22,7 +22,7 @@ public partial class GameDetail : GameBaseComponent
 
     private void HandleSubmitNewGame()
     {
-        NavigationManager.NavigateTo("/Games");
+        NavigationManager.NavigateTo("/");
     }
 
     private async Task FetchGameDetail()
@@ -30,7 +30,6 @@ public partial class GameDetail : GameBaseComponent
         try
         {
             IsLoading = true;
-            StateHasChanged();
 
             Game = await GameGateway.GetGameById(GameId);
         }
@@ -41,7 +40,6 @@ public partial class GameDetail : GameBaseComponent
         finally
         {
             IsLoading = false;
-            StateHasChanged();
         }
     }
 }

src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Components/GameCreationForm.razor.cs

@@ -59,7 +59,6 @@ public partial class GameCreationForm
         try
         {
             IsLoading = true;
-            StateHasChanged();
 
             int gameId;
             var authState = await AuthenticationState.GetAuthenticationStateAsync();
@@ -109,7 +108,6 @@ public partial class GameCreationForm
         try
         {
             IsLoading = true;
-            StateHasChanged();
 
             GameDto = await GameGateway.GetGameById(gameId);
         }
@@ -120,8 +118,9 @@ public partial class GameCreationForm
         finally
         {
             IsLoading = false;
-            EditContext = new(GameDto);
-            StateHasChanged();
         }
+
+        EditContext = new(GameDto);
+        StateHasChanged();
     }
 }

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

@@ -34,7 +34,6 @@
     grid-column: 2;
     box-sizing: border-box;
     color: var(--white);
-    padding: 0 8px;
 }
 
 ::deep input[type="date"]::-webkit-calendar-picker-indicator {

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

@@ -96,4 +96,16 @@
     .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/Filter/AdvancedGameFilter.razor

@@ -4,8 +4,6 @@
 @using GameIdeas.BlazorApp.Shared.Constants
 @using GameIdeas.Shared.Dto
 
-<NavigationLock OnBeforeInternalNavigation="HandleLocationChanged" />
-
 <div class="advanced-filter-container" style="@(ExpandedFilter ? "display: flex" : "")">
     <span class="title">@ResourcesKey.Filters</span>
 
@@ -29,15 +27,15 @@
     <SelectSearch TItem="int" Placeholder="@ResourcesKey.ReleaseDate" GetLabel="@(p => p.ToString())"
                   @bind-Values=GameFilter.ReleaseYears @bind-Values:after=HandleValueChanged Theme="Theme" Items="Categories?.ReleaseYears" />
 
-    <SelectSearch TItem="int" Placeholder="@ResourcesKey.StorageSize" GetLabel="@GetStorageSpaceLabel" OrderBy="@(item => item.ToString())"
+    <SelectSearch TItem="int" Placeholder="@ResourcesKey.StorageSize" GetLabel="@GetStorageSpaceLabel"
                   @bind-Values=GameFilter.StorageSpaceIds @bind-Values:after=HandleValueChanged Theme="Theme" Items="@(Categories?.StorageSpaces?.Select(stor => stor.Id).ToList())" />
 
     <span class="title">@ResourcesKey.LastAdd</span>
 </div>
 
-<button type="button" class="open-filter" @onclick=HandleExpandFilterAsync>
+<button type="button" class="open-filter" @onclick=HandleExpandFilter>
     @Icons.Filter
 </button>
 
-<BackdropFilter @ref="BackdropFilter" OnClick="HandleBackdropFilterClickedAsync" CloseOnClick="true"
+<BackdropFilter @ref="BackdropFilter" OnClick="HandleBackdropFilterClicked" CloseOnClick="true"
                 AllowBodyScroll="false" Color="BackdropFilterColor.Overlay" />

src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/AdvancedGameFilter.razor.cs

@@ -4,7 +4,6 @@ using GameIdeas.BlazorApp.Shared.Components.Select.Models;
 using GameIdeas.Resources;
 using GameIdeas.Shared.Dto;
 using Microsoft.AspNetCore.Components;
-using Microsoft.AspNetCore.Components.Routing;
 
 namespace GameIdeas.BlazorApp.Pages.Games.Filter;
 
@@ -49,24 +48,13 @@ public partial class AdvancedGameFilter
 
         throw new ArgumentNullException(ResourcesKey.ErrorStorageSpaceLabel);
     }
-    private void HandleExpandFilterAsync(Microsoft.AspNetCore.Components.Web.MouseEventArgs args)
+    private void HandleExpandFilter(Microsoft.AspNetCore.Components.Web.MouseEventArgs args)
     {
         ExpandedFilter = true;
         BackdropFilter?.Show();
     }
-
+    private void HandleBackdropFilterClicked()
-    private void HandleBackdropFilterClickedAsync()
     {
         ExpandedFilter = false;
     }
-
-    private void HandleLocationChanged(LocationChangingContext locationContext)
-    {
-        if (ExpandedFilter)
-        {
-            ExpandedFilter = false;
-            BackdropFilter?.Hide();
-            locationContext.PreventNavigation();
-        }
-    }
 }

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

@@ -1,4 +1,4 @@
-@page "/Games"
+@page "/"
 @using GameIdeas.BlazorApp.Pages.Games.Components
 @using GameIdeas.BlazorApp.Pages.Games.Filter
 @using GameIdeas.BlazorApp.Shared.Components
@@ -23,20 +23,10 @@
     <div class="content">
         @if (!IsLoading)
         {
-            @if (GamesDto.NumberOfGames != 0)
+            @foreach (var game in GamesDto)
             {
-                <div class="games-number">@string.Format(ResourcesKey.GamesNumberFormat, GamesDto.NumberOfGames)</div>
+                <GameRow GameDto="game" OnDelete="HandleDeleteGame" OnEdit="HandleEditGame" />
-
-                @foreach (var game in GamesDto.Games)
-                {
-                    <GameRow GameDto="game" OnDelete="HandleDeleteGame" OnEdit="HandleEditGame" />
-                }
             }
-            else
-            {
-                <div class="no-games">@ResourcesKey.NoGames</div>
-            }
-            
         }
         else
         {

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

@@ -12,7 +12,7 @@ public partial class Games : GameBaseComponent
 {
     private DisplayType DisplayType = DisplayType.List;
     private GameFilterParams GameFilter = new();
-    private GameListDto GamesDto = new();
+    private IEnumerable<GameDto> GamesDto = [];
     private int CurrentPage;
     private Popup? DeletePopup;
     private GameDto? GameToDelete;
@@ -37,7 +37,6 @@ public partial class Games : GameBaseComponent
         try
         {
             IsLoading = displayLoader;
-            StateHasChanged();
 
             GamesDto = await GameGateway.FetchGames(GameFilter, CurrentPage);
         }
@@ -48,7 +47,6 @@ public partial class Games : GameBaseComponent
         finally
         {
             IsLoading = false;
-            StateHasChanged();
         }
     }
     private async Task HandleFilterChanged(GameFilterParams args)
@@ -93,7 +91,6 @@ public partial class Games : GameBaseComponent
         try
         {
             IsLoading = true;
-            StateHasChanged();
 
             await GameGateway.DeleteGame(GameToDelete?.Id ?? 0);
             await HandleFetchDatas(false);

src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Gateways/GameGateway.cs

@@ -35,7 +35,7 @@ public class GameGateway(IHttpClientService httpClientService) : IGameGateway
         }
     }
 
-    public async Task<GameListDto> FetchGames(GameFilterParams filterParams, int currentPage)
+    public async Task<IEnumerable<GameDto>> FetchGames(GameFilterParams filterParams, int currentPage)
     {
         try
         {
@@ -52,11 +52,9 @@ public class GameGateway(IHttpClientService httpClientService) : IGameGateway
                 PropertyIds = filterParams.Properties?.Select(d => d.Id ?? 0).ToList(),
                 ReleaseYears = filterParams.ReleaseYears,
                 TagIds = filterParams.Tags?.Select(d => d.Id ?? 0).ToList(),
-                SortPropertyName = filterParams.SortProperty?.PropertyName,
-                SortType = filterParams.SortType?.SortType
             };
 
-            var result = await httpClientService.FetchDataAsync<GameListDto>(Endpoints.Game.Fetch(filter));
+            var result = await httpClientService.FetchDataAsync<IEnumerable<GameDto>>(Endpoints.Game.Fetch(filter));
             return result ?? throw new InvalidOperationException(ResourcesKey.ErrorFetchGames);
         }
         catch (Exception)

src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Gateways/IGameGateway.cs

@@ -7,7 +7,7 @@ public interface IGameGateway
 {
     Task<CategoriesDto> FetchCategories();
     Task<int> CreateGame(GameDetailDto game);
-    Task<GameListDto> FetchGames(GameFilterParams filter, int currentPage);
+    Task<IEnumerable<GameDto>> FetchGames(GameFilterParams filter, int currentPage);
     Task<GameDetailDto> GetGameById(int gameId);
     Task<bool> DeleteGame(int gameIdToDelete);
     Task<int> UpdateGame(GameDetailDto gameDto);

src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Redirect/RedirectToGames.razor

@@ -1,10 +0,0 @@
-@page "/"
-
-@inject NavigationManager navigationManager
-
-@code {
-    protected override void OnInitialized()
-    {
-        navigationManager.NavigateTo("/Games");
-    }
-}

src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/UserMenu/Components/Login.razor.cs

@@ -28,8 +28,6 @@ public partial class Login
         try
         {
             IsLoading = true;
-            StateHasChanged();
-
             await AuthGateway.Login(UserDto);
         }
         catch (Exception)

src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/UserMenu/Components/Login.razor.css

@@ -50,6 +50,6 @@
     border-radius: 50%;
     border: 3px solid rgba(0, 0, 0, 0.2);
     border-top-color: var(--white);
-    animation: spin 1s linear infinite;
+    animation: loading 1s linear infinite;
     justify-self: center;
 }

src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/UserMenu/UserMenu.razor.cs

@@ -14,7 +14,7 @@ public partial class UserMenu
     {
         ContentVisile = false;
         await AuthGateway.Logout();
-        NavigationManager.NavigateTo("/Games");
+        NavigationManager.NavigateTo("/");
     }
 
     private void HandleAccountClicked()

src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Users/Components/UserRowSkeleton.razor.css

@@ -54,3 +54,16 @@
     fill: var(--yellow);
 }
 
+@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/Users/Users.razor

@@ -16,7 +16,7 @@
     <div class="header-content">
         <SearchInput Placeholder="@ResourcesKey.EnterUsername" @bind-Text="FilterParams.Name" @bind-Text:after=HandleFilterChanged />
         <SelectSearch TItem="RoleDto" Placeholder="@ResourcesKey.Roles" @bind-Values="FilterParams.Roles" @bind-Values:after=HandleFilterChanged
-        Items="Roles.ToList()" GetLabel="@(role => role.Name)" Theme="SelectTheme.Filter" />
+                      Items="Roles.ToList()" GetLabel="@(role => role.Name)" Theme="SelectTheme.Filter" />
     </div>
 </HeaderGameIdeas>
 
@@ -28,18 +28,9 @@
     <div class="content">
         @if (!IsLoading)
         {
-            @if (UserList.UsersCount != 0)
+            @foreach (var user in UserList.Users ?? [])
             {
-                <div class="user-number">@string.Format(ResourcesKey.UsersNumberFormat, UserList.UsersCount)</div>
+                <UserRow User="user" Roles="Roles.ToList()" OnRemove="HandleOpenConfirmationPopup" OnSubmit="HandleUpdateUser" Validator="@(new UserUpdateValidator())" CanDelete=@(user.Id != currentUserId) />
-
-                @foreach (var user in UserList.Users ?? [])
-                {
-                    <UserRow User="user" Roles="Roles.ToList()" OnRemove="HandleOpenConfirmationPopup" OnSubmit="HandleUpdateUser" Validator="@(new UserUpdateValidator())" CanDelete=@(user.Id != currentUserId) />
-                }
-            }
-            else
-            {
-                <div class="no-users">@ResourcesKey.NoUsers</div>
             }
         }
         else

src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Users/Users.razor.cs

@@ -36,17 +36,18 @@ public partial class Users
         }
 
 
-        await FetchUsers();
+        await FetchData();
-        await FetchRoles();
         await base.OnInitializedAsync();
     }
 
-    private async Task FetchUsers(bool displayLoading = true)
+    private async Task FetchData(bool fetchRoles = true)
     {
         try
         {
-            IsLoading = displayLoading;
+            IsLoading = true;
-            StateHasChanged();
+
+            if (fetchRoles)
+                Roles = await UserGateway.GetRoles();
 
             UserList = await UserGateway.GetUsers(FilterParams, CurrentPage);
         }
@@ -57,27 +58,6 @@ public partial class Users
         finally
         {
             IsLoading = false;
-            StateHasChanged();
-        }
-    }
-
-    private async Task FetchRoles()
-    {
-        try
-        {
-            IsLoading = true;
-            StateHasChanged();
-
-            Roles = await UserGateway.GetRoles();
-        }
-        catch (Exception)
-        {
-            throw;
-        }
-        finally
-        {
-            IsLoading = false;
-            StateHasChanged();
         }
     }
 
@@ -86,10 +66,9 @@ public partial class Users
         try
         {
             IsLoading = true;
-            StateHasChanged();
 
             await UserGateway.CreateUser(user);
-            await FetchUsers();
+            await FetchData(false);
         }
         catch (Exception)
         {
@@ -98,9 +77,9 @@ public partial class Users
         finally
         {
             IsLoading = false;
-            StateHasChanged();
-            UserAdd = new();
         }
+
+        UserAdd = new();
     }
 
     private async Task HandleUpdateUser(UserDto user)
@@ -108,10 +87,9 @@ public partial class Users
         try
         {
             IsLoading = true;
-            StateHasChanged();
 
             await UserGateway.UpdateUser(user);
-            await FetchUsers();
+            await FetchData(false);
         }
         catch (Exception)
         {
@@ -120,7 +98,6 @@ public partial class Users
         finally
         {
             IsLoading = false;
-            StateHasChanged();
         }
     }
 
@@ -136,10 +113,9 @@ public partial class Users
         try
         {
             IsLoading = true;
-            StateHasChanged();
 
             await UserGateway.DeleteUser(UserDelete.Id);
-            await FetchUsers();
+            await FetchData(false);
         }
         catch (Exception)
         {
@@ -148,7 +124,6 @@ public partial class Users
         finally
         {
             IsLoading = false;
-            StateHasChanged();
         }
 
         UserDelete = null;
@@ -159,7 +134,7 @@ public partial class Users
     }
     private async Task HandleFilterChanged()
     {
-        await FetchUsers(false);
+        await FetchData(false);
     }
     private void HandleCancelPopupClicked()
     {

src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/CircleLoader/CircleLoader.razor.css

@@ -19,3 +19,13 @@
     height: 60px;
     animation: spin 1s linear infinite;
 }
+
+@keyframes spin {
+    0% {
+        transform: rotate(0deg);
+    }
+
+    100% {
+        transform: rotate(360deg);
+    }
+}

src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/GameBaseComponent.cs

@@ -24,7 +24,6 @@ public class GameBaseComponent : ComponentBase
         try
         {
             IsLoading = true;
-            StateHasChanged();
 
             Categories = await GameGateway.FetchCategories();
         }
@@ -35,7 +34,6 @@ public class GameBaseComponent : ComponentBase
         finally
         {
             IsLoading = false;
-            StateHasChanged();
         }
     }
 

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

@@ -7,7 +7,6 @@
            placeholder="@Placeholder"
            disabled="@IsDisable"
            style="@(IsDisable ? "pointer-events: none" : "")"
-           onClick="this.select();"
            @bind=@Text
            @bind:event="oninput"
            @bind:after="HandleTextChanged"

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

@@ -26,7 +26,7 @@
     height: 100%;
     width: 100%;
     padding: 0;
-    min-width: 0;   
+    min-width: 0;
 }
 
 .clear-icon {
@@ -34,7 +34,6 @@
     min-width: 18px;
     height: 18px;
     width: 18px;
-    z-index: 800;
 }
 
     .clear-icon:hover {

src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Models/SelectParams.cs

@@ -4,10 +4,8 @@ public class SelectParams<TItem, THeader>
 {
     public List<TItem> Items { get; set; } = [];
     public Func<TItem, string> GetItemLabel { get; set; } = _ => string.Empty;
-    public Func<TItem, string>? GetItemOrder { get; set; }
     public List<THeader> Headers { get; set; } = [];
     public Func<THeader, string> GetHeaderLabel { get; set; } = _ => string.Empty;
-    public Func<THeader, string>? GetHeaderOrder { get; set; }
     public Func<string, TItem>? AddItem { get; set; }
 
 }

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

@@ -27,7 +27,7 @@
 
                 @if (Params.Headers != null)
                 {
-                    @foreach (var header in GetHeaders())
+                    @foreach (var header in (HeaderValues ?? []).UnionBy(Params.Headers, Params.GetHeaderLabel).OrderBy(Params.GetHeaderLabel))
                     {
                         <SelectRow IsSelected=@(HeaderValues?.Contains(header))
                                    Label="@Params.GetHeaderLabel(header)" Theme=Theme
@@ -42,7 +42,7 @@
 
                 @if (Params.Items != null)
                 {
-                    @foreach (var item in GetItems())
+                    @foreach (var item in (Values ?? []).UnionBy(Params.Items, Params.GetItemLabel).OrderBy(Params.GetItemLabel))
                     {
                         <SelectRow IsSelected=@(Values?.Contains(item))
                                    Label="@Params.GetItemLabel(item)" Theme=Theme

src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Select.razor.cs

@@ -101,12 +101,4 @@ public partial class Select<TItem, THeader>
             await ValuesChanged.InvokeAsync(Values);
         }
     }
-
-    private List<THeader> GetHeaders() => [.. (HeaderValues ?? [])
-        .UnionBy(Params.Headers, Params.GetHeaderLabel)
-        .OrderBy(Params.GetHeaderOrder ?? Params.GetHeaderLabel)];
-
-    private List<TItem> GetItems() => [.. (Values ?? [])
-        .UnionBy(Params.Items, Params.GetItemLabel)
-        .OrderBy(Params.GetItemOrder ?? Params.GetItemLabel)];
 }

src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Select.razor.css

@@ -22,6 +22,8 @@
     overflow: hidden;
     display: flex;
     flex-direction: column;
+    animation-name: fade-in;
+    animation-duration: 0.2s;
 }
 
 .line {

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

@@ -5,12 +5,12 @@
 
 @typeparam TItem
 
-<Select @ref=Select TItem="TItem" THeader="string" Theme="Theme" Type="SelectType" DisableClicked=true
+<Select @ref=Select TItem="TItem" THeader="string" Theme="Theme" Type="SelectType"
         Params="SelectParams" Values=Values ValuesChanged="HandleValuesChanged" QuickAdd=QuickAdd>
 
     <div class="@SelectHelper.GetClassFromTheme(Theme)">
         <SearchInput @ref=SearchInput Icon="SearchInputIcon.Dropdown" Placeholder="@Placeholder" 
-                     TextChanged="HandleTextChanged" ClearClicked="HandleClearClicked" IsDisable=false
+                     TextChanged="HandleClearClicked" ClearClicked="HandleClearClicked" IsDisable=QuickAdd
                      FocusIn="HandleFocusIn" SearchClicked="HandleFocusIn" />
     </div>
 

src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/SelectSearch/SelectSearch.razor.cs

@@ -1,4 +1,3 @@
-using GameIdeas.BlazorApp.Pages.Games;
 using GameIdeas.BlazorApp.Shared.Components.Search;
 using GameIdeas.BlazorApp.Shared.Components.Select;
 using GameIdeas.BlazorApp.Shared.Components.Select.Models;
@@ -11,7 +10,6 @@ public partial class SelectSearch<TItem>
     [Parameter] public SelectTheme Theme { get; set; }
     [Parameter] public List<TItem> Items { get; set; } = [];
     [Parameter] public Func<TItem, string> GetLabel { get; set; } = _ => string.Empty;
-    [Parameter] public Func<TItem, string>? OrderBy { get; set; }
     [Parameter] public List<TItem> Values { get; set; } = [];
     [Parameter] public EventCallback<List<TItem>> ValuesChanged { get; set; }
     [Parameter] public string Placeholder { get; set; } = string.Empty;
@@ -29,7 +27,6 @@ public partial class SelectSearch<TItem>
         {
             Items = Items,
             GetItemLabel = GetLabel,
-            GetItemOrder = OrderBy,
             AddItem = AddItem
         };
 
@@ -38,7 +35,7 @@ public partial class SelectSearch<TItem>
 
     protected override void OnAfterRender(bool firstRender)
     {
-        if (firstRender && Values != null)
+        if (Values != null)
         {
             SearchInput?.SetText(string.Join(", ", Values.Select(GetLabel)));
         }
@@ -54,37 +51,11 @@ public partial class SelectSearch<TItem>
     private async Task HandleClearClicked()
     {
         Values = [];
-        Select?.Close();
+        await ValuesChanged.InvokeAsync([.. Values]);
-        SearchInput?.SetText(string.Empty);
-        await ValuesChanged.InvokeAsync([]);
     }
 
     private void HandleFocusIn()
     {
         Select?.Open();
     }
-    private void HandleTextChanged(string args)
-    {
-        if (!string.IsNullOrEmpty(args))
-        {
-            var keywords = args
-                        .Split([' '], StringSplitOptions.RemoveEmptyEntries)
-                        .Select(k => k.Trim())
-                        .ToArray() ?? [];
-
-            SelectParams.Items = [.. Items
-                .Where(game => keywords.All(
-                    kw => SelectParams.GetItemLabel(game).Contains(kw, StringComparison.OrdinalIgnoreCase)
-                ))
-                .OrderBy(game => keywords.Min(kw =>
-                    SelectParams.GetItemLabel(game).IndexOf(kw, StringComparison.OrdinalIgnoreCase)
-                ))
-                .ThenBy(game => SelectParams.GetItemLabel(game).Length)];
-        }
-        else
-        {
-            SelectParams.Items = Items;
-            SearchInput?.SetText(string.Join(", ", Values?.Select(GetLabel) ?? []));
-        }
-    }
 }

src/GameIdeas/Client/GameIdeas.BlazorApp/wwwroot/css/app.css

@@ -82,20 +82,64 @@ html, body, #app {
     }
 
 .loading-progress {
-    display: flex;
+    position: relative;
-    width: 100vw;
+    display: block;
-    height: 100vh;
+    width: 8rem;
-    justify-content: center;
+    height: 8rem;
-    align-items: center;
+    margin: 20vh auto 1rem auto;
-    animation: loading-background 4s linear infinite;
 }
 
-    .loading-progress > #loading-icon {
+    .loading-progress circle {
-        max-width: 200px;
+        fill: none;
-        max-height: 200px;
+        stroke: #e0e0e0;
-        animation: loading-icon 4s ease-in-out infinite;
+        stroke-width: 0.6rem;
+        transform-origin: 50% 50%;
+        transform: rotate(-90deg);
     }
 
+        .loading-progress circle:last-child {
+            stroke: #1b6ec2;
+            stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
+            transition: stroke-dasharray 0.05s ease-in-out;
+        }
+
+.loading-progress-text {
+    color: #000;
+    position: absolute;
+    text-align: center;
+    font-weight: bold;
+    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
+}
+
+    .loading-progress-text:after {
+        content: var(--blazor-load-percentage-text, "Loading");
+    }
+
+code {
+    color: #c02d76;
+}
+
+.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
+    color: var(--bs-secondary-color);
+    text-align: end;
+}
+
+.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
+    text-align: start;
+}
+
+:focus-visible {
+    outline: none;
+}
+
+.expand-col-2 {
+    grid-column: 1 / 3;
+}
+
+.expand-row-2 {
+    grid-row: 1 / 3;
+}
+
 .body-sm {
     color: #ccc
 }
@@ -114,59 +158,14 @@ html, body, #app {
     text-decoration: none;
 }
 
-:focus-visible {
-    outline: none;
-}
 
-@keyframes loading-background {
+@keyframes fade-in {
-    0% {
+    0% {opacity: 0}
-        background: rgb(0, 0, 0, 0.2);
+    100% {opacity: 1}
-    }
-
-    50% {
-        background: rgb(0, 0, 0, 0.3);
-    }
-
-    100% {
-        background: rgb(0, 0, 0, 0.2);
-    }
-}
-
-
-@keyframes loading-icon {
-    0% {
-        transform: scale(1);
-    }
-
-    50% {
-        transform: scale(0.95);
-    }
-
-    100% {
-        transform: scale(1);
-    }
 }
 
 @keyframes loading {
-    0% {
+    to {
-        background: rgb(255, 255, 255, 0.05);
-    }
-
-    50% {
-        background: rgb(255, 255, 255, 0.2);
-    }
-
-    100% {
-        background: rgb(255, 255, 255, 0.05);
-    }
-}
-
-@keyframes spin {
-    0% {
-        transform: rotate(0deg);
-    }
-
-    100% {
         transform: rotate(360deg);
     }
 }

src/GameIdeas/Client/GameIdeas.BlazorApp/wwwroot/css/background.css

@@ -1,42 +0,0 @@
-.orb {
-    position: absolute;
-    border-radius: 100%;
-    z-index: var(--index-orb);
-}
-
-.green {
-    width: 80vh;
-    height: 80vh;
-    top: -20vh;
-    background: #315941;
-    filter: blur(30vh);
-}
-
-.blue {
-    width: 80vw;
-    height: 80vw;
-    left: 10vw;
-    top: 50vh;
-    background: #3A4156;
-    filter: blur(30vh);
-}
-
-.red {
-    width: 100vh;
-    height: 100vh;
-    left: 60vw;
-    top: -40vh;
-    background: #593533;
-    filter: blur(30vh);
-}
-
-#background {
-    height: 100vh;
-    width: 100vw;
-    background: var(--background);
-    position: fixed;
-    overflow: hidden;
-    top: 0;
-    left: 0;
-    z-index: var(--index-background);
-}

src/GameIdeas/Client/GameIdeas.BlazorApp/wwwroot/index.html

@@ -7,22 +7,17 @@
     <title>Game Ideas</title>
     <base href="/" />
     <link rel="stylesheet" href="css/app.css" />
-    <link rel="stylesheet" href="css/background.css" />
     <link rel="icon" type="image/png" href="icon.png" />
     <link href="GameIdeas.BlazorApp.styles.css" rel="stylesheet" />
 </head>
 
 <body>
     <div id="app">
-        <div class="loading-progress">
+        <svg class="loading-progress">
-            <img src="icon.png" alt="" id="loading-icon">
+            <circle r="40%" cx="50%" cy="50%" />
-        </div>
+            <circle r="40%" cx="50%" cy="50%" />
-    </div>
+        </svg>
-
+        <div class="loading-progress-text"></div>
-    <div id="background">
-        <span class="orb red"></span>
-        <span class="orb blue"></span>
-        <span class="orb green"></span>
     </div>
 
     <div id="blazor-error-ui">
@@ -30,7 +25,6 @@
         <a href="." class="reload">Reload</a>
         <span class="dismiss">🗙</span>
     </div>
-
     <script src="_framework/blazor.webassembly.js"></script>
     <script src="Shared/Components/BackdropFilter/BackdropFilter.razor.js"></script>
     <script src="Pages/Games/Components/GameCreationForm.razor.js"></script>

src/GameIdeas/GameIdeas.Resources/CreateStaticResourceKey.cs

@@ -74,10 +74,6 @@ public class Translations (TranslationService translationService)
     public string Detail => translationService.Translate(nameof(Detail));
     public string Edit => translationService.Translate(nameof(Edit));
     public string Delete => translationService.Translate(nameof(Delete));
-    public string NoGames => translationService.Translate(nameof(NoGames));
-    public string NoUsers => translationService.Translate(nameof(NoUsers));
-    public string GamesNumberFormat => translationService.Translate(nameof(GamesNumberFormat));
-    public string UsersNumberFormat => translationService.Translate(nameof(UsersNumberFormat));
 }
 
 public static class ResourcesKey
@@ -160,8 +156,4 @@ public static class ResourcesKey
     public static string Detail => _instance?.Detail ?? throw new InvalidOperationException("ResourcesKey.Detail is not initialized.");
     public static string Edit => _instance?.Edit ?? throw new InvalidOperationException("ResourcesKey.Edit is not initialized.");
     public static string Delete => _instance?.Delete ?? throw new InvalidOperationException("ResourcesKey.Delete is not initialized.");
-    public static string NoGames => _instance?.NoGames ?? throw new InvalidOperationException("ResourcesKey.NoGames is not initialized.");
-    public static string NoUsers => _instance?.NoUsers ?? throw new InvalidOperationException("ResourcesKey.NoUsers is not initialized.");
-    public static string GamesNumberFormat => _instance?.GamesNumberFormat ?? throw new InvalidOperationException("ResourcesKey.GamesNumberFormat is not initialized.");
-    public static string UsersNumberFormat => _instance?.UsersNumberFormat ?? throw new InvalidOperationException("ResourcesKey.UsersNumberFormat is not initialized.");
 }

src/GameIdeas/GameIdeas.Shared/Constants/GlobalConstants.cs

@@ -22,7 +22,7 @@ public class GlobalConstants
     public const int API_PORT = 8000;
     public const string SUB_DOMAIN_NAME = "api-";
 
-    public const double DELAY_INPUT_MS = 450;
+    public const double DELAY_INPUT_MS = 500;
 
     public const int MAX_DESCRIPTION_LENGTH = 350;
 }

src/GameIdeas/GameIdeas.Shared/Dto/GameListDto.cs

@@ -1,7 +0,0 @@
-namespace GameIdeas.Shared.Dto;
-
-public class GameListDto
-{
-    public IEnumerable<GameDto> Games { get; set; } = [];
-    public int NumberOfGames { get; set; }
-}

src/GameIdeas/Server/GameIdeas.WebAPI/Controllers/GameController.cs

@@ -17,7 +17,7 @@ public class GameController(
     private readonly ILogger<GameController> logger = loggerFactory.CreateLogger<GameController>();
 
     [HttpGet]
-    public async Task<ActionResult<GameListDto>> SearchGames([FromQuery] GameFilterDto filter)
+    public async Task<ActionResult<IEnumerable<GameDto>>> SearchGames([FromQuery] GameFilterDto filter)
     {
         try
         {

src/GameIdeas/Server/GameIdeas.WebAPI/Files/GameIdeas.fr.json

@@ -69,9 +69,5 @@
   "ReadLess": "Réduire",
   "Detail": "Détail",
   "Edit": "Modifier",
-  "Delete": "Supprimer",
+  "Delete": "Supprimer"
-  "NoGames": "Pas de jeux disponible",
-  "NoUsers": "Pas d'utilisateurs disponible",
-  "GamesNumberFormat": "Nombre de jeux : {0}",
-  "UsersNumberFormat": "Nombre d'utilisateurs : {0}"
 }

src/GameIdeas/Server/GameIdeas.WebAPI/Services/Games/GameReadService.cs

@@ -12,7 +12,7 @@ namespace GameIdeas.WebAPI.Services.Games;
 
 public class GameReadService(GameIdeasContext context, IMapper mapper, ICategoryService categoryService) : IGameReadService
 {
-    public async Task<GameListDto> GetGames(GameFilterDto filter)
+    public async Task<IEnumerable<GameDto>> GetGames(GameFilterDto filter)
     {
         var query = context.Games
             .Include(g => g.GamePlatforms).ThenInclude(gp => gp.Platform)
@@ -26,19 +26,13 @@ public class GameReadService(GameIdeasContext context, IMapper mapper, ICategory
 
         ApplyOrder(ref query, filter);
 
-        var games = await query.ToListAsync();
+        var games = await query.Skip((filter.CurrentPage - 1) * GlobalConstants.NUMBER_PER_PAGE)
+            .Take(GlobalConstants.NUMBER_PER_PAGE)
+            .ToListAsync();
 
         ApplyStaticFilter(ref games, filter);
 
-        games = [.. games
+        return mapper.Map<IEnumerable<GameDto>>(games);
-            .Skip((filter.CurrentPage - 1) * GlobalConstants.NUMBER_PER_PAGE)
-            .Take(GlobalConstants.NUMBER_PER_PAGE)];
-
-        return new()
-        {
-            Games = mapper.Map<IEnumerable<GameDto>>(games),
-            NumberOfGames = games.Count
-        };
     }
 
     public async Task<GameDetailDto> GetGameById(int gameId)

src/GameIdeas/Server/GameIdeas.WebAPI/Services/Games/IGameReadService.cs

@@ -4,6 +4,6 @@ namespace GameIdeas.WebAPI.Services.Games;
 
 public interface IGameReadService
 {
-    Task<GameListDto> GetGames(GameFilterDto filter);
+    Task<IEnumerable<GameDto>> GetGames(GameFilterDto filter);
     Task<GameDetailDto> GetGameById(int gameId);
 }

src/GameIdeas/Server/GameIdeas.WebAPI/Services/Users/UserReadService.cs

@@ -33,9 +33,8 @@ public class UserReadService(
             .OrderBy(u => u.UserName)
             .ToListAsync();
 
-        ApplyStaticFilter(ref users, filter);
-        
         var count = users.Count;
+        ApplyStaticFilter(ref users, filter);
 
         var usersDto = mapper.Map<IEnumerable<UserDto>>(users);
         usersDto = await ApplyRoles(usersDto, filter);