wip playlist view skeleton loading

MusicX/App.xaml

@@ -17,6 +17,7 @@
                 <ResourceDictionary x:Name="NavBarStyles" Source="Styles/NavigationBarStyles.xaml" />
                 <ResourceDictionary x:Name="ModalFrameStyles" Source="Styles/ModalFrameStyles.xaml" />
                 <ResourceDictionary x:Name="MusicXWindowStyles" Source="Styles/MusicXWindowStyles.xaml" />
+                <ResourceDictionary x:Name="LoadingBorderStyles" Source="Styles/LoadingBorderStyles.xaml" />
             </ResourceDictionary.MergedDictionaries>
 
             <FontFamily x:Key="SegoeFluentIcons">pack://application:,,,/;component/Fonts/#Segoe Fluent Icons</FontFamily>
@@ -27,6 +28,8 @@
 
             <convertes:ListToVisibilityConverter x:Key="ListToVisibilityConverter" />
             <convertes:InversionBooleanToVisibilityConverter x:Key="InversionBooleanToVisibilityConverter" />
+            <BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter" />
+            <convertes:BooleanToHiddenVisibilityConverter x:Key="BooleanToHiddenVisibilityConverter" />
 
         </ResourceDictionary>
     </Application.Resources>

MusicX/Controls/LoadingBorder.cs

@@ -0,0 +1,34 @@
+using System;
+using System.Windows;
+using System.Windows.Controls;
+using System.Windows.Markup;
+using System.Windows.Media.Animation;
+
+namespace MusicX.Controls;
+
+public class LoadingBorder : Border
+{
+    public static readonly DependencyProperty IsLoadingProperty = DependencyProperty.Register(
+        nameof(IsLoading), typeof(bool), typeof(LoadingBorder), new PropertyMetadata(true));
+
+    public bool IsLoading
+    {
+        get => (bool)GetValue(IsLoadingProperty);
+        set => SetValue(IsLoadingProperty, value);
+    }
+
+    protected override void OnInitialized(EventArgs e)
+    {
+        base.OnInitialized(e);
+        if (IsLoading && TryFindResource("LoadingBorderLoaderAnimation") is Storyboard storyboard)
+        {
+            if (((INameScope)Style).FindName("LoadingBorderLoaderAnimation") is null)
+                Style.RegisterName("LoadingBorderLoaderAnimation", new BeginStoryboard
+                {
+                    Storyboard = storyboard,
+                    Name = "LoadingBorderLoaderAnimation"
+                });
+            BeginStoryboard(storyboard);
+        }
+    }
+}

MusicX/Converters/BooleanToHiddenVisibilityConverter.cs

@@ -0,0 +1,22 @@
+using System;
+using System.Globalization;
+using System.Windows;
+using System.Windows.Data;
+
+namespace MusicX.Converters;
+
+public class BooleanToHiddenVisibilityConverter : IValueConverter
+{
+    public object Convert(object? value, Type targetType, object? parameter, CultureInfo culture)
+    {
+        if (value is bool flag)
+            return flag ? Visibility.Visible : Visibility.Hidden;
+
+        return Visibility.Visible;
+    }
+
+    public object ConvertBack(object? value, Type targetType, object? parameter, CultureInfo culture)
+    {
+        return value is Visibility.Visible;
+    }
+}

MusicX/Styles/LoadingBorderStyles.xaml

@@ -0,0 +1,42 @@
+<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+                    xmlns:controls="clr-namespace:MusicX.Controls">
+    <Style x:Key="DefaultLoadingBorderStyle" TargetType="controls:LoadingBorder">
+        <Style.Resources>
+            <Storyboard x:Key="LoadingBorderLoaderAnimation">
+                <ColorAnimation Storyboard.TargetProperty="Background.(SolidColorBrush.Color)"
+                                AutoReverse="True"
+                                RepeatBehavior="Forever"
+                                Duration="0:0:1"
+                                From="#383838" To="#7f7f7f7f">
+                    <ColorAnimation.EasingFunction>
+                        <ExponentialEase EasingMode="EaseIn" />
+                    </ColorAnimation.EasingFunction>
+                </ColorAnimation>
+            </Storyboard>
+        </Style.Resources>
+
+        <Setter Property="HorizontalAlignment" Value="Left" />
+        <Setter Property="BorderThickness" Value="{StaticResource CardBorderThemeThickness}" />
+
+        <Style.Triggers>
+            <Trigger Property="IsLoading" Value="True">
+                <Trigger.EnterActions>
+                    <BeginStoryboard Name="LoadingBorderLoaderAnimation" Storyboard="{StaticResource LoadingBorderLoaderAnimation}" />
+                </Trigger.EnterActions>
+                <Trigger.ExitActions>
+                    <RemoveStoryboard BeginStoryboardName="LoadingBorderLoaderAnimation" />
+                </Trigger.ExitActions>
+                <Setter Property="Background">
+                    <Setter.Value>
+                        <SolidColorBrush Color="#383838" />
+                    </Setter.Value>
+                </Setter>
+                <Setter Property="BorderBrush" Value="{DynamicResource CardBorderBrush}" />
+                <Setter Property="CornerRadius" Value="{DynamicResource ControlCornerRadius}" />
+            </Trigger>
+        </Style.Triggers>
+    </Style>
+
+    <Style TargetType="controls:LoadingBorder" BasedOn="{StaticResource DefaultLoadingBorderStyle}" />
+</ResourceDictionary>

MusicX/ViewModels/PlaylistViewModel.cs

@@ -27,13 +27,11 @@ public class PlaylistViewModel:BaseViewModel
         public string Year { get; set; }
         public string Plays { get; set; }
         public string Description { get; set; }
-        public Visibility VisibleLoading { get; set; } = Visibility.Visible;
-        public Visibility VisibleContent { get; set; } = Visibility.Collapsed;
+        public bool IsLoading { get; set; } = true;
+        public bool IsLoaded { get; set; }
         public string Cover { get; set; }
         public ObservableRangeCollection<Audio> Tracks { get; } = new();
 
-        public Visibility VisibileAddInfo { get; set; } = Visibility.Visible;
-
         public Playlist Playlist { get; private set; }
         public PlaylistData PlaylistData { get; set; }
 
@@ -107,8 +105,8 @@ public async Task LoadPlaylist(Playlist playlist, bool delete = true)
                     else
                         await Application.Current.Dispatcher.InvokeAsync(Tracks.Clear);
                 }
-                VisibleContent = Visibility.Collapsed;
-                VisibleLoading = Visibility.Visible;
+                IsLoaded = false;
+                IsLoading = true;
 
                 var p = await vkService.GetPlaylistAsync(40, playlist.Id, playlist.AccessKey, playlist.OwnerId);
                 this.PlaylistLoaded.Invoke(this, p.Playlist);
@@ -201,8 +199,8 @@ public async Task LoadPlaylist(Playlist playlist, bool delete = true)
 
 
 
-                VisibleContent = Visibility.Visible;
-                VisibleLoading = Visibility.Collapsed;
+                IsLoaded = true;
+                IsLoading = false;
 
                 this.PlaylistLoaded?.Invoke(this, playlist);