ModListGallery loading ring for loading modlist meta

Wabbajack/Views/MainWindow.xaml

@@ -32,7 +32,7 @@
                 <local:ModeSelectionView />
             </DataTemplate>
             <DataTemplate DataType="{x:Type local:ModListGalleryVM}">
-                <local:ModListGalleryView />
+                <local:ModListGalleryView ViewModel="{Binding}" />
             </DataTemplate>
             <DataTemplate DataType="{x:Type local:WebBrowserVM}">
                 <local:WebBrowserView />

Wabbajack/Views/ModListGalleryView.xaml

@@ -1,14 +1,17 @@
-<UserControl
+<rxui:ReactiveUserControl
     x:Class="Wabbajack.ModListGalleryView"
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:iconPacks="http://metro.mahapps.com/winfx/xaml/iconpacks"
     xmlns:local="clr-namespace:Wabbajack"
+    xmlns:mahapps="clr-namespace:MahApps.Metro.Controls;assembly=MahApps.Metro"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    xmlns:rxui="http://reactiveui.net"
     xmlns:system="clr-namespace:System;assembly=mscorlib"
     d:DesignHeight="450"
     d:DesignWidth="800"
+    x:TypeArguments="local:ModListGalleryVM"
     mc:Ignorable="d">
     <Grid>
         <Grid.RowDefinitions>
@@ -32,9 +35,9 @@
             BorderThickness="1,0,1,1">
             <ScrollViewer Background="Transparent" VerticalScrollBarVisibility="Auto">
                 <ItemsControl
+                    x:Name="ModListGalleryControl"
                     Margin="0,10,0,0"
-                    HorizontalAlignment="Center"
+                    HorizontalAlignment="Center">
-                    ItemsSource="{Binding ModLists}">
                     <ItemsControl.ItemsPanel>
                         <ItemsPanelTemplate>
                             <WrapPanel />
@@ -48,6 +51,7 @@
                 </ItemsControl>
             </ScrollViewer>
         </Border>
+        <mahapps:ProgressRing x:Name="LoadingRing" Grid.Row="1" />
         <local:TopProgressView
             Title="Browsing Modlists"
             Grid.Row="0"
@@ -61,10 +65,9 @@
             Margin="7,5,0,0"
             HorizontalAlignment="Left"
             VerticalAlignment="Top"
-            Command="{Binding BackCommand}"
             Style="{StaticResource IconCircleButtonStyle}"
             ToolTip="Back to main menu">
             <iconPacks:PackIconMaterial Foreground="{Binding Foreground, RelativeSource={RelativeSource AncestorType={x:Type Button}}}" Kind="ArrowLeft" />
         </Button>
     </Grid>
-</UserControl>
+</rxui:ReactiveUserControl>

Wabbajack/Views/ModListGalleryView.xaml.cs

@@ -1,16 +1,33 @@
 using System.Diagnostics;
+using System.Reactive.Disposables;
+using System.Reactive.Linq;
 using System.Windows;
 using System.Windows.Controls;
 using MahApps.Metro.Controls;
+using ReactiveUI;
 using Wabbajack.Lib.ModListRegistry;
 
 namespace Wabbajack
 {
-    public partial class ModListGalleryView : UserControl
+    public partial class ModListGalleryView : ReactiveUserControl<ModListGalleryVM>
     {
         public ModListGalleryView()
         {
             InitializeComponent();
+
+            this.WhenActivated(dispose =>
+            {
+                this.WhenAny(x => x.ViewModel.BackCommand)
+                    .BindToStrict(this, x => x.BackButton.Command)
+                    .DisposeWith(dispose);
+                this.WhenAny(x => x.ViewModel.ModLists)
+                    .BindToStrict(this, x => x.ModListGalleryControl.ItemsSource)
+                    .DisposeWith(dispose);
+                this.WhenAny(x => x.ViewModel.ModLists.Count)
+                    .Select(x => x > 0 ? Visibility.Collapsed : Visibility.Visible)
+                    .BindToStrict(this, x => x.LoadingRing.Visibility)
+                    .DisposeWith(dispose);
+            });
         }
     }
 }