different loading shimmer for table view

Totoro.Core/ViewModels/UserListViewModel.cs

@@ -32,10 +32,8 @@ public UserListViewModel(ITrackingServiceContext trackingService,
 
         ChangeCurrentViewCommand = ReactiveCommand.Create<AnimeStatus>(x => Filter.ListStatus = x);
         RefreshCommand = ReactiveCommand.CreateFromTask(SetInitialState, this.WhenAnyValue(x => x.ViewState).Select(x => x is not ViewState.Loading));
-        SetDisplayMode = ReactiveCommand.Create<DisplayMode>(x => Mode = x);
         SetSortProperty = ReactiveCommand.Create<string>(columnName => SelectedSortProperty = columnName);
         SetSortOrder = ReactiveCommand.Create<bool>(isAscending => IsSortByAscending = isAscending);
-        Mode = settings.ListDisplayMode;
         GridViewSettings = settings.UserListGridViewSettings;
         DataGridSettings = SettingsModel.UserListTableViewSettings;
         (SelectedSortProperty, IsSortByAscending) = DataGridSettings.Sort;
@@ -90,29 +88,9 @@ public UserListViewModel(ITrackingServiceContext trackingService,
             .Select(x => x == DisplayMode.List)
             .ToPropertyEx(this, x => x.IsListView)
             .DisposeWith(Garbage);
-
-        this.WhenAnyValue(x => x.Mode)
-            .Subscribe(m => settings.ListDisplayMode = m);
-
-        Observable.Timer(TimeSpan.FromSeconds(1), TimeSpan.FromSeconds(1))
-            .Where(_ => Mode == DisplayMode.Grid)
-            .ObserveOn(RxApp.MainThreadScheduler)
-            .Subscribe(_ =>
-            {
-                try
-                {
-                    foreach (var item in Anime.Where(x => x.NextEpisodeAt is not null))
-                    {
-                        item.RaisePropertyChanged(nameof(item.NextEpisodeAt));
-                    }
-                }
-                catch { }
-            }, RxApp.DefaultExceptionHandler.OnError)
-            .DisposeWith(Garbage);
     }
 
     [Reactive] public ViewState ViewState { get; set; }
-    [Reactive] public DisplayMode Mode { get; set; }
     [Reactive] public List<string> Genres { get; set; }
     [Reactive] public AnimeCollectionFilter Filter { get; set; } = new();
     [Reactive] public DataGridSettings DataGridSettings { get; set; }

Totoro.WinUI/LoadingViews/TableLoadingView.xaml

@@ -0,0 +1,30 @@
+<UserControl
+    x:Class="Totoro.WinUI.LoadingViews.TableLoadingView"
+    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:Interactivity="using:Microsoft.Xaml.Interactivity"
+    xmlns:b="using:Totoro.WinUI.Behaviors"
+    xmlns:ctk="using:CommunityToolkit.Labs.WinUI"
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    mc:Ignorable="d">
+
+    <ItemsView ItemsSource="123456" SelectionMode="None">
+        <ItemsView.ItemTransitionProvider>
+            <LinedFlowLayoutItemCollectionTransitionProvider />
+        </ItemsView.ItemTransitionProvider>
+        <ItemsView.ItemTemplate>
+            <DataTemplate>
+                <ItemContainer>
+                    <Grid>
+                        <ctk:Shimmer Height="46" HorizontalAlignment="Stretch"/>
+                    </Grid>
+                </ItemContainer>
+            </DataTemplate>
+        </ItemsView.ItemTemplate>
+        <ItemsView.Layout>
+            <StackLayout Spacing="3"/>
+        </ItemsView.Layout>
+    </ItemsView>
+
+</UserControl>

Totoro.WinUI/LoadingViews/TableLoadingView.xaml.cs

@@ -0,0 +1,14 @@
+using Microsoft.UI.Xaml.Controls;
+
+
+namespace Totoro.WinUI.LoadingViews;
+
+public sealed partial class TableLoadingView : UserControl
+{
+    public List<int> DummyList { get; } = [.. Enumerable.Range(1, 5)];
+
+    public TableLoadingView()
+    {
+        InitializeComponent();
+    }
+}

Totoro.WinUI/Totoro.WinUI.csproj

@@ -100,6 +100,10 @@
 		<None Update="appsettings.json">
 			<CopyToOutputDirectory>Always</CopyToOutputDirectory>
 		</None>
+		<Page Update="LoadingViews\TableLoadingView.xaml">
+		  <XamlRuntime>$(DefaultXamlRuntime)</XamlRuntime>
+		  <Generator>MSBuild:Compile</Generator>
+		</Page>
 		<Page Update="LoadingViews\SeasonalCardGridLoadingView.xaml">
 		  <Generator>MSBuild:Compile</Generator>
 		</Page>

Totoro.WinUI/Views/SettingsSections/PreferencesSection.xaml

@@ -50,14 +50,6 @@
                 SelectedItem="{x:Bind ViewModel.Settings.ListDisplayMode, Mode=TwoWay}" />
         </labs:SettingsCard>
 
-        <labs:SettingsCard
-            Command="{x:Bind ViewModel.Navigate}"
-            CommandParameter="Grid View Settings"
-            Description="Customize how anime is displayed in a grid"
-            Header="Grid View Settings"
-            HeaderIcon="{ui:FontIcon Glyph=&#xf0e2;}"
-            IsClickEnabled="True" />
-
         <TextBlock
             FontSize="16"
             FontWeight="SemiBold"

Totoro.WinUI/Views/UserListPage.xaml

@@ -276,7 +276,14 @@
                     HorizontalAlignment="Center"
                     CornerRadius="5" />
 
-                <loadingviews:CardGridLoadingView Grid.Row="1" />
+                <ctk:SwitchPresenter Value="{x:Bind Mode, Mode=OneWay}" Grid.Row="1">
+                    <ctk:Case IsDefault="True" Value="{x:Bind cm:DisplayMode.Grid}">
+                        <loadingviews:CardGridLoadingView/>
+                    </ctk:Case>
+                    <ctk:Case Value="{x:Bind cm:DisplayMode.List}">
+                        <loadingviews:TableLoadingView/>
+                    </ctk:Case>
+                </ctk:SwitchPresenter>
             </Grid>
         </ctk:Case>
 
@@ -618,14 +625,14 @@
                             <AppBarButton.Flyout>
                                 <MenuFlyout x:Name="DisplayModeFlyout">
                                     <RadioMenuFlyoutItem
-                                        Command="{x:Bind ViewModel.SetDisplayMode}"
+                                        Command="{x:Bind SetDisplayMode}"
                                         CommandParameter="{x:Bind cm:DisplayMode.Grid}"
                                         GroupName="Display Mode"
                                         Text="Grid view"
                                         Icon="{ui:FontIcon Glyph=&#xf0e2;}"/>
 
                                     <RadioMenuFlyoutItem
-                                        Command="{x:Bind ViewModel.SetDisplayMode}"
+                                        Command="{x:Bind SetDisplayMode}"
                                         CommandParameter="{x:Bind cm:DisplayMode.List}"
                                         GroupName="Display Mode"
                                         Text="Table view"

Totoro.WinUI/Views/UserListPage.xaml.cs

@@ -17,7 +17,20 @@ public sealed partial class UserListPage : UserListPageBase
     public static DataGridSettings TableViewSettings { get; private set; }
 
     public static List<int?> Scores { get; } = [null, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
+    private static readonly ISettings _settings = App.GetService<ISettings>();
 
+
+
+    public DisplayMode Mode
+    {
+        get { return (DisplayMode)GetValue(ModeProperty); }
+        set { SetValue(ModeProperty, value); }
+    }
+
+    public static readonly DependencyProperty ModeProperty =
+        DependencyProperty.Register("Mode", typeof(DisplayMode), typeof(UserListPage), new PropertyMetadata(DisplayMode.Grid));
+
+
     public static string ToStatusString(AnimeStatus status)
     {
         return status switch
@@ -33,20 +46,25 @@ public static string ToStatusString(AnimeStatus status)
     }
 
     public static ICommand ViewInBrowser { get; }
+    public ICommand SetDisplayMode { get; }
 
     static UserListPage()
     {
+
         ViewInBrowser = ReactiveCommand.CreateFromTask<AnimeModel>(LaunchUrl);
     }
 
     public UserListPage()
     {
         TableViewSettings = SettingsModel.UserListTableViewSettings;
+        SetDisplayMode = ReactiveCommand.Create<DisplayMode>(x => Mode = x);
 
         InitializeComponent();
 
         this.WhenActivated(d =>
         {
+            Mode = _settings.ListDisplayMode;
+
             QuickAdd
             .Events()
             .Click
@@ -63,12 +81,13 @@ public UserListPage()
             .Click
             .Subscribe(_ => GridViewSettingsTeachingTip.IsOpen ^= true);
 
-            this.WhenAnyValue(x => x.ViewModel.Mode)
+            this.WhenAnyValue(x => x.Mode)
                 .ObserveOn(RxApp.MainThreadScheduler)
                 .Subscribe(mode =>
                 {
                     AnimeCollectionDataTemplateSelector.Mode = mode;
                     AnimeCollectionView.Layout = CreateLayout(mode);
+                    _settings.ListDisplayMode = mode;
                 });
 
             this.WhenAnyValue(x => x.ViewModel.SelectedSortProperty)
@@ -95,7 +114,7 @@ public UserListPage()
                     rm.IsChecked = true;
                 });
 
-            this.WhenAnyValue(x => x.ViewModel.Mode)
+            this.WhenAnyValue(x => x.Mode)
                 .ObserveOn(RxApp.MainThreadScheduler)
                 .Subscribe(mode =>
                 {
@@ -106,6 +125,22 @@ public UserListPage()
 
                     rm.IsChecked = true;
                 });
+
+            Observable.Timer(TimeSpan.FromSeconds(1), TimeSpan.FromSeconds(1))
+                .ObserveOn(RxApp.MainThreadScheduler)
+                .Where(_ => Mode == DisplayMode.Grid)
+                .Subscribe(_ =>
+                {
+                    try
+                    {
+                        foreach (var item in ViewModel.Anime.Where(x => x.NextEpisodeAt is not null))
+                        {
+                            item.RaisePropertyChanged(nameof(item.NextEpisodeAt));
+                        }
+                    }
+                    catch { }
+                }, RxApp.DefaultExceptionHandler.OnError)
+                .DisposeWith(ViewModel.Garbage);
         });
     }