Добавлены скелетоны

PlaylistShared.Pwa/Components/Common/TrackItemSkeleton.razor

@@ -0,0 +1,23 @@
+@using PlaylistShared.Pwa.Components.Common
+
+<MudStack Class="py-2 px-0" Row AlignItems="AlignItems.Center">
+    <!-- Обложка-скелет -->
+    <MudItem>
+        <MudSkeleton SkeletonType="SkeletonType.Rectangle" Width="40px" Height="40px" />
+    </MudItem>
+
+    <!-- Информация о треке (две строки текста) -->
+    <MudItem>
+        <MudStack Spacing="0">
+            <MudSkeleton SkeletonType="SkeletonType.Text" Width="180px" Class="my-0" />
+            <MudSkeleton SkeletonType="SkeletonType.Text" Width="120px" Class="my-0"  />
+        </MudStack>
+    </MudItem>
+
+    <MudSpacer />
+
+    <!-- Длительность-скелет -->
+    <MudItem>
+        <MudSkeleton SkeletonType="SkeletonType.Text" Width="30px" />
+    </MudItem>
+</MudStack>

PlaylistShared.Pwa/Components/SharedPlaylist/Cards/CardSkeleton.razor

@@ -0,0 +1,16 @@
+@using PlaylistShared.Pwa.Components.Common
+
+<MudItem Class="d-flex flex-column align-center pa-2">
+    <!-- Аватар-скелет -->
+    <MudAvatar Size="MudBlazor.Size.Large">
+        <MudSkeleton SkeletonType="SkeletonType.Circle" Width="@Size.ToString()" Height="@Size.ToString()" />
+    </MudAvatar>
+    
+    <!-- Текст-скелет -->
+    <MudSkeleton SkeletonType="SkeletonType.Text" Width="50px" Class="mt-2" />
+    <MudSkeleton SkeletonType="SkeletonType.Text" Width="30px" Class="ma-0" />
+</MudItem>
+
+@code {
+    [Parameter] public int Size { get; set; } = 50;
+}

PlaylistShared.Pwa/Pages/SharedPlaylistView.razor

@@ -16,16 +16,6 @@
 @inject IDialogService DialogService
 
 <MudContainer MaxWidth="MaxWidth.ExtraLarge" Class="pa-1" Style="height: 100%;">
-    @if (_loading)
-    {
-        <MudProgressCircular Indeterminate />
-    }
-    else if (_playlist == null)
-    {
-        <MudAlert Severity="Severity.Error">Плейлист не найден или у вас нет доступа</MudAlert>
-    }
-    else
-    {
     @* --- ВЕРСИЯ ДЛЯ ПК (сетка) --- *@
     <MudHidden Breakpoint="Breakpoint.MdAndUp" Invert>
         <MudGrid Spacing="2" Class="flex-grow-1 pt-2" Style="height: 100%;">
@@ -77,7 +67,6 @@
             }
         </div>
     </MudHidden>
-    }
 </MudContainer>
 
 <style>
@@ -100,14 +89,21 @@
 
 @code {
     /// <summary>Токен расшаренного плейлиста</summary>
-    [Parameter] public string Token { get; set; }
+    [Parameter] public required string Token { get; set; }
 
     private RenderFragment PlaylistCardContent => __builder =>
     {
         <MudCard Elevation="0" Class="d-flex flex-column" Style="height: 100%;">
             <MudCardHeader>
                 <CardHeaderContent>
+                    @if(_loading)
+                    {
+                        <MudSkeleton Width="200px" Height="32px" SkeletonType="SkeletonType.Text" />
+                    }
+                    else
+                    {
                         <PlaylistHeader Playlist="@_playlist" />
+                    }
                 </CardHeaderContent>
                 <CardHeaderActions>
                     <MudIconButton Icon="@Icons.Material.Filled.Refresh" OnClick="LoadTracks" Disabled="@_tracksLoading" />
@@ -115,6 +111,17 @@
             </MudCardHeader>
 
             <MudCardContent Class="flex-grow-1 overflow-auto flex-column">
+                @if (_loading || _tracksLoading)
+                {
+                    <TrackItemSkeleton />
+                    <TrackItemSkeleton />
+                    <TrackItemSkeleton />
+                    <TrackItemSkeleton />
+                    <TrackItemSkeleton />
+                    <TrackItemSkeleton />
+                }
+                else
+                {
                     <MudTable Items="@_tracks" 
                                 Hover 
                                 Elevation="0" 
@@ -132,6 +139,7 @@
                             }
                         </RowTemplate>
                     </MudTable>
+                }
             </MudCardContent>
         </MudCard>
     };
@@ -168,7 +176,28 @@
             <MudCardContent Class="flex-grow-1 overflow-auto flex-column">
                 @if (_isSearching)
                 {
-                    <MudProgressCircular Indeterminate Class="mx-auto my-8" />
+
+                    @if (_searchType != TrackSearchType.Track || _searchType == TrackSearchType.All)
+                    {
+                    <MudSkeleton SkeletonType="SkeletonType.Text" Width="170px" Height="45px" Class="mt-4 mb-2 ml-2" />
+                    <MudStack Row>
+                        <CardSkeleton />
+                        <CardSkeleton />
+                        <CardSkeleton />
+                        <CardSkeleton />
+                    </MudStack>
+                    }
+
+                    @if (_searchType == TrackSearchType.All || _searchType == TrackSearchType.Track)
+                    {
+                    <MudSkeleton SkeletonType="SkeletonType.Text" Width="170px" Height="45px" Class="mt-4 mb-2 ml-2" />
+                    <TrackItemSkeleton />
+                    <TrackItemSkeleton />
+                    <TrackItemSkeleton />
+                    <TrackItemSkeleton />
+                    <TrackItemSkeleton />
+                    }
+                    
                 }
                 else if (_searchResult != null)
                 {
@@ -278,7 +307,7 @@
     /// <summary>Состояние: Происходит загрузка плейлиста.</summary>
     private bool _loading = true;
     /// <summary>Состояние: Происходит загрузка треков плейлиста.</summary>
-    private bool _tracksLoading;
+    private bool _tracksLoading = true;
 
     /********************************
      * Вкладка добавления треков