FrigaT/PlaylistShared
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
FrigaT
2026-04-21 19:57:24 +03:00
parent f9bbd895c4
commit 1c32b2e997
3 changed files with 142 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
PlaylistShared.Pwa/Components/Common/TrackItemSkeleton.razor Normal file
View File

@@ -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>

16
PlaylistShared.Pwa/Components/SharedPlaylist/Cards/CardSkeleton.razor Normal file
View File

@@ -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;
}

57
PlaylistShared.Pwa/Pages/SharedPlaylistView.razor
View File

@@ -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;
/********************************
* Вкладка добавления треков