From 1c32b2e99717d9dcfb7da4294c873dc5a9c99484 Mon Sep 17 00:00:00 2001
From: FrigaT <m.surov@automacon.ru>
Date: Tue, 21 Apr 2026 19:57:24 +0300
Subject: [PATCH] =?UTF-8?q?=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB=D0=B5?=
 =?UTF-8?q?=D0=BD=D1=8B=20=D1=81=D0=BA=D0=B5=D0=BB=D0=B5=D1=82=D0=BE=D0=BD?=
 =?UTF-8?q?=D1=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Components/Common/TrackItemSkeleton.razor |  23 +++
 .../SharedPlaylist/Cards/CardSkeleton.razor   |  16 ++
 .../Pages/SharedPlaylistView.razor            | 177 ++++++++++--------
 3 files changed, 142 insertions(+), 74 deletions(-)
 create mode 100644 PlaylistShared.Pwa/Components/Common/TrackItemSkeleton.razor
 create mode 100644 PlaylistShared.Pwa/Components/SharedPlaylist/Cards/CardSkeleton.razor

diff --git a/PlaylistShared.Pwa/Components/Common/TrackItemSkeleton.razor b/PlaylistShared.Pwa/Components/Common/TrackItemSkeleton.razor
new file mode 100644
index 0000000..2529570
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/PlaylistShared.Pwa/Components/SharedPlaylist/Cards/CardSkeleton.razor b/PlaylistShared.Pwa/Components/SharedPlaylist/Cards/CardSkeleton.razor
new file mode 100644
index 0000000..d865bd5
--- /dev/null
+++ b/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;
+}
\ No newline at end of file
diff --git a/PlaylistShared.Pwa/Pages/SharedPlaylistView.razor b/PlaylistShared.Pwa/Pages/SharedPlaylistView.razor
index 7151651..af156be 100644
--- a/PlaylistShared.Pwa/Pages/SharedPlaylistView.razor
+++ b/PlaylistShared.Pwa/Pages/SharedPlaylistView.razor
@@ -16,68 +16,57 @@
 @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%;">
+    @* --- ВЕРСИЯ ДЛЯ ПК (сетка) --- *@
+    <MudHidden Breakpoint="Breakpoint.MdAndUp" Invert>
+        <MudGrid Spacing="2" Class="flex-grow-1 pt-2" Style="height: 100%;">
+            <MudItem xs="12" md="6" Style="height: 100%;">
+                @PlaylistCardContent
+            </MudItem>
+
+            @if (_canAdd)
+            {
                 <MudItem xs="12" md="6" Style="height: 100%;">
-                    @PlaylistCardContent
+                    @AddTrackCardContent
                 </MudItem>
-
-                @if (_canAdd)
-                {
-                    <MudItem xs="12" md="6" Style="height: 100%;">
-                        @AddTrackCardContent
-                    </MudItem>
-                }
-            </MudGrid>
-        </MudHidden>
+            }
+        </MudGrid>
+    </MudHidden>
         
-        @* --- ВЕРСИЯ ДЛЯ МОБИЛОК (вкладки внизу) --- *@
-        <MudHidden Breakpoint="Breakpoint.SmAndDown" Invert>
-            <div class="d-flex flex-column pa-0 ma-0" style="height: 100%; min-height: 0;">
+    @* --- ВЕРСИЯ ДЛЯ МОБИЛОК (вкладки внизу) --- *@
+    <MudHidden Breakpoint="Breakpoint.SmAndDown" Invert>
+        <div class="d-flex flex-column pa-0 ma-0" style="height: 100%; min-height: 0;">
         
-                @* Область контента: оба компонента здесь всегда *@
-                <div class="flex-grow-1 relative pa-0" style="min-height: 0;">
-                    <div class="@(_activeMobileTab == 0 ? "d-flex" : "d-none") flex-column" style="height: 100%;">
-                        <div class="flex-grow-1 overflow-auto pb-1">
-                            @PlaylistCardContent
-                        </div>
-                    </div>
-
-                    <div class="@(_activeMobileTab == 1 ? "d-flex" : "d-none") flex-column" style="height: 100%;">
-                        <div class="flex-grow-1 overflow-auto pb-1">
-                            @AddTrackCardContent
-                        </div>
+            @* Область контента: оба компонента здесь всегда *@
+            <div class="flex-grow-1 relative pa-0" style="min-height: 0;">
+                <div class="@(_activeMobileTab == 0 ? "d-flex" : "d-none") flex-column" style="height: 100%;">
+                    <div class="flex-grow-1 overflow-auto pb-1">
+                        @PlaylistCardContent
                     </div>
                 </div>
 
-                @* Кастомная панель навигации внизу *@
-                @if (_canAdd)
-                {
-                    <MudPaper Elevation="0" Class="py-1">
-                        <MudNavMenu Margin="Margin.None" Class="d-flex flex-row justify-space-around">
-                            <MudIconButton Icon="@Icons.Material.Filled.LibraryMusic"
-                                           Color="@(_activeMobileTab == 0 ? Color.Primary : Color.Default)"
-                                           OnClick="() => _activeMobileTab = 0" />
-                                <MudIconButton Icon="@Icons.Material.Filled.AddCircle"
-                                               Color="@(_activeMobileTab == 1 ? Color.Primary : Color.Default)"
-                                               OnClick="() => _activeMobileTab = 1" />
-                        </MudNavMenu>
-                    </MudPaper>
-                }
+                <div class="@(_activeMobileTab == 1 ? "d-flex" : "d-none") flex-column" style="height: 100%;">
+                    <div class="flex-grow-1 overflow-auto pb-1">
+                        @AddTrackCardContent
+                    </div>
+                </div>
             </div>
-        </MudHidden>
-    }
+
+            @* Кастомная панель навигации внизу *@
+            @if (_canAdd)
+            {
+                <MudPaper Elevation="0" Class="py-1">
+                    <MudNavMenu Margin="Margin.None" Class="d-flex flex-row justify-space-around">
+                        <MudIconButton Icon="@Icons.Material.Filled.LibraryMusic"
+                                        Color="@(_activeMobileTab == 0 ? Color.Primary : Color.Default)"
+                                        OnClick="() => _activeMobileTab = 0" />
+                            <MudIconButton Icon="@Icons.Material.Filled.AddCircle"
+                                            Color="@(_activeMobileTab == 1 ? Color.Primary : Color.Default)"
+                                            OnClick="() => _activeMobileTab = 1" />
+                    </MudNavMenu>
+                </MudPaper>
+            }
+        </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>
-                    <PlaylistHeader Playlist="@_playlist" />
+                    @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,23 +111,35 @@
             </MudCardHeader>
 
             <MudCardContent Class="flex-grow-1 overflow-auto flex-column">
-                <MudTable Items="@_tracks" 
-                Hover 
-                Elevation="0" 
-                Breakpoint="Breakpoint.None" 
-                Style="min-height: 0;">
-                    <RowTemplate>
-                        <MudTd Class="py-1 px-0" Style="width: 100%;">
-                            <TrackItem Track="@context" PlaylistShareToken="@Token" CanPlay="@_canPlay" />
-                        </MudTd>
-                        @if (_canRemove)
-                        {
-                            <MudTd Class="py-1 px-0">
-                                <MudIconButton Icon="@Icons.Material.Filled.Delete" Color="Color.Error" Size="Size.Small" OnClick="() => OnRemoveTrack(context)" />
+                @if (_loading || _tracksLoading)
+                {
+                    <TrackItemSkeleton />
+                    <TrackItemSkeleton />
+                    <TrackItemSkeleton />
+                    <TrackItemSkeleton />
+                    <TrackItemSkeleton />
+                    <TrackItemSkeleton />
+                }
+                else
+                {
+                    <MudTable Items="@_tracks" 
+                                Hover 
+                                Elevation="0" 
+                                Breakpoint="Breakpoint.None" 
+                                Style="min-height: 0;">
+                        <RowTemplate>
+                            <MudTd Class="py-1 px-0" Style="width: 100%;">
+                                <TrackItem Track="@context" PlaylistShareToken="@Token" CanPlay="@_canPlay" />
                             </MudTd>
-                        }
-                    </RowTemplate>
-                </MudTable>
+                            @if (_canRemove)
+                            {
+                                <MudTd Class="py-1 px-0">
+                                    <MudIconButton Icon="@Icons.Material.Filled.Delete" Color="Color.Error" Size="Size.Small" OnClick="() => OnRemoveTrack(context)" />
+                                </MudTd>
+                            }
+                        </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;
 
     /********************************
      * Вкладка добавления треков