From 384010ca0a142123551407cac3231ed8fb429afe Mon Sep 17 00:00:00 2001
From: Ruben <ruben@live.dk>
Date: Tue, 29 Oct 2024 20:47:20 +0100
Subject: [PATCH] Show loading indicator when clicking update button in about
 dialog

---
 src/PicView.Avalonia/Views/AboutView.axaml    | 247 +++++++++---------
 src/PicView.Avalonia/Views/AboutView.axaml.cs |  15 +-
 2 files changed, 140 insertions(+), 122 deletions(-)

diff --git a/src/PicView.Avalonia/Views/AboutView.axaml b/src/PicView.Avalonia/Views/AboutView.axaml
index 8a56d4df..ac9aa37f 100644
--- a/src/PicView.Avalonia/Views/AboutView.axaml
+++ b/src/PicView.Avalonia/Views/AboutView.axaml
@@ -5,6 +5,7 @@
     xmlns="https://github.com/avaloniaui"
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    xmlns:uc="clr-namespace:PicView.Avalonia.Views.UC"
     xmlns:viewModels="clr-namespace:PicView.Avalonia.ViewModels"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
     <Design.DataContext>
@@ -111,149 +112,153 @@
         </DrawingImage>
     </UserControl.Resources>
 
-    <StackPanel Margin="0,10,0,10">
+    <Panel>
+        <uc:SpinWaiter IsVisible="False" x:Name="SpinWaiter" />
 
-        <Image
-            Height="75"
-            Margin="15,30,15,25"
-            Source="{StaticResource LogoFullImage}" />
+        <StackPanel Margin="0,10,0,10" x:Name="ParentContainer">
 
-        <HyperlinkButton
-            HorizontalAlignment="Center"
-            Margin="0,0,0,2"
-            NavigateUri="https://github.com/Ruben2776/PicView"
-            ToolTip.Tip="https://github.com/Ruben2776/PicView">
-            <StackPanel Orientation="Horizontal">
+            <Image
+                Height="75"
+                Margin="15,30,15,25"
+                Source="{StaticResource LogoFullImage}" />
+
+            <HyperlinkButton
+                HorizontalAlignment="Center"
+                Margin="0,0,0,2"
+                NavigateUri="https://github.com/Ruben2776/PicView"
+                ToolTip.Tip="https://github.com/Ruben2776/PicView">
+                <StackPanel Orientation="Horizontal">
+                    <TextBlock
+                        Classes="txt"
+                        Foreground="{StaticResource SecondaryTextColor}"
+                        Text="{CompiledBinding GithubRepo}" />
+                    <Path
+                        Data="M256,32C132.3,32,32,134.9,32,261.7c0,101.5,64.2,187.5,153.2,217.9a17.56,17.56,0,0,0,3.8.4c8.3,0,11.5-6.1,11.5-11.4,0-5.5-.2-19.9-.3-39.1a102.4,102.4,0,0,1-22.6,2.7c-43.1,0-52.9-33.5-52.9-33.5-10.2-26.5-24.9-33.6-24.9-33.6-19.5-13.7-.1-14.1,1.4-14.1h.1c22.5,2,34.3,23.8,34.3,23.8,11.2,19.6,26.2,25.1,39.6,25.1a63,63,0,0,0,25.6-6c2-14.8,7.8-24.9,14.2-30.7-49.7-5.8-102-25.5-102-113.5,0-25.1,8.7-45.6,23-61.6-2.3-5.8-10-29.2,2.2-60.8a18.64,18.64,0,0,1,5-.5c8.1,0,26.4,3.1,56.6,24.1a208.21,208.21,0,0,1,112.2,0c30.2-21,48.5-24.1,56.6-24.1a18.64,18.64,0,0,1,5,.5c12.2,31.6,4.5,55,2.2,60.8,14.3,16.1,23,36.6,23,61.6,0,88.2-52.4,107.6-102.3,113.3,8,7.1,15.2,21.1,15.2,42.5,0,30.7-.3,55.5-.3,63,0,5.4,3.1,11.5,11.4,11.5a19.35,19.35,0,0,0,4-.4C415.9,449.2,480,363.1,480,261.7,480,134.9,379.7,32,256,32Z"
+                        Fill="{StaticResource SecondaryTextColor}"
+                        Height="16"
+                        Margin="5,0,0,0"
+                        Stretch="Fill"
+                        Width="16" />
+                </StackPanel>
+            </HyperlinkButton>
+
+            <HyperlinkButton
+                HorizontalAlignment="Center"
+                Margin="0,2,0,2"
+                NavigateUri="https://picview.org"
+                ToolTip.Tip="https://picview.org">
                 <TextBlock
                     Classes="txt"
                     Foreground="{StaticResource SecondaryTextColor}"
-                    Text="{CompiledBinding GithubRepo}" />
-                <Path
-                    Data="M256,32C132.3,32,32,134.9,32,261.7c0,101.5,64.2,187.5,153.2,217.9a17.56,17.56,0,0,0,3.8.4c8.3,0,11.5-6.1,11.5-11.4,0-5.5-.2-19.9-.3-39.1a102.4,102.4,0,0,1-22.6,2.7c-43.1,0-52.9-33.5-52.9-33.5-10.2-26.5-24.9-33.6-24.9-33.6-19.5-13.7-.1-14.1,1.4-14.1h.1c22.5,2,34.3,23.8,34.3,23.8,11.2,19.6,26.2,25.1,39.6,25.1a63,63,0,0,0,25.6-6c2-14.8,7.8-24.9,14.2-30.7-49.7-5.8-102-25.5-102-113.5,0-25.1,8.7-45.6,23-61.6-2.3-5.8-10-29.2,2.2-60.8a18.64,18.64,0,0,1,5-.5c8.1,0,26.4,3.1,56.6,24.1a208.21,208.21,0,0,1,112.2,0c30.2-21,48.5-24.1,56.6-24.1a18.64,18.64,0,0,1,5,.5c12.2,31.6,4.5,55,2.2,60.8,14.3,16.1,23,36.6,23,61.6,0,88.2-52.4,107.6-102.3,113.3,8,7.1,15.2,21.1,15.2,42.5,0,30.7-.3,55.5-.3,63,0,5.4,3.1,11.5,11.4,11.5a19.35,19.35,0,0,0,4-.4C415.9,449.2,480,363.1,480,261.7,480,134.9,379.7,32,256,32Z"
-                    Fill="{StaticResource SecondaryTextColor}"
-                    Height="16"
-                    Margin="5,0,0,0"
-                    Stretch="Fill"
-                    Width="16" />
-            </StackPanel>
-        </HyperlinkButton>
+                    Text="PicView.org" />
+            </HyperlinkButton>
 
-        <HyperlinkButton
-            HorizontalAlignment="Center"
-            Margin="0,2,0,2"
-            NavigateUri="https://picview.org"
-            ToolTip.Tip="https://picview.org">
             <TextBlock
                 Classes="txt"
                 Foreground="{StaticResource SecondaryTextColor}"
-                Text="PicView.org" />
-        </HyperlinkButton>
+                HorizontalAlignment="Center"
+                Margin="0,7,0,7"
+                Text="2017 - 2024 © Ruben Hyldgaard Negendahl" />
 
-        <TextBlock
-            Classes="txt"
-            Foreground="{StaticResource SecondaryTextColor}"
-            HorizontalAlignment="Center"
-            Margin="0,7,0,7"
-            Text="2017 - 2024 © Ruben Hyldgaard Negendahl" />
+            <HyperlinkButton
+                HorizontalAlignment="Center"
+                Margin="0,2,0,2"
+                NavigateUri="https://github.com/Ruben2776/PicView?tab=License-1-ov-file#readme"
+                ToolTip.Tip="{CompiledBinding ViewLicenseFile}">
+                <TextBlock
+                    Classes="txt"
+                    Foreground="{StaticResource SecondaryTextColor}"
+                    Text="GNU GPLv3" />
+            </HyperlinkButton>
 
-        <HyperlinkButton
-            HorizontalAlignment="Center"
-            Margin="0,2,0,2"
-            NavigateUri="https://github.com/Ruben2776/PicView?tab=License-1-ov-file#readme"
-            ToolTip.Tip="{CompiledBinding ViewLicenseFile}">
             <TextBlock
                 Classes="txt"
                 Foreground="{StaticResource SecondaryTextColor}"
-                Text="GNU GPLv3" />
-        </HyperlinkButton>
+                HorizontalAlignment="Center"
+                Margin="0,25,0,10">
+                <Run FontFamily="/Assets/Fonts/Roboto-Bold.ttf#Roboto" Text="{CompiledBinding Version}" />
+                <Run Text="" x:Name="AppVersion" />
+            </TextBlock>
 
-        <TextBlock
-            Classes="txt"
-            Foreground="{StaticResource SecondaryTextColor}"
-            HorizontalAlignment="Center"
-            Margin="0,25,0,10">
-            <Run FontFamily="/Assets/Fonts/Roboto-Bold.ttf#Roboto" Text="{CompiledBinding Version}" />
-            <Run Text="" x:Name="AppVersion" />
-        </TextBlock>
+            <Button
+                Classes="BorderStyle altHover mainBtn"
+                HorizontalAlignment="Center"
+                Margin="0,10,0,15"
+                x:Name="UpdateButton">
+                <TextBlock Classes="txt" Text="{CompiledBinding CheckForUpdates}" />
+            </Button>
 
-        <Button
-            Classes="BorderStyle altHover mainBtn"
-            HorizontalAlignment="Center"
-            Margin="0,10,0,15"
-            x:Name="UpdateButton">
-            <TextBlock Classes="txt" Text="{CompiledBinding CheckForUpdates}" />
-        </Button>
+            <HyperlinkButton
+                HorizontalAlignment="Center"
+                Margin="0,20,0,20"
+                NavigateUri="https://ko-fi.com/W7W46BJFV"
+                Width="200">
+                <Image Source="{StaticResource kofi_button_strokeDrawingImage}" x:Name="KofiImage" />
+            </HyperlinkButton>
 
-        <HyperlinkButton
-            HorizontalAlignment="Center"
-            Margin="0,20,0,20"
-            NavigateUri="https://ko-fi.com/W7W46BJFV"
-            Width="200">
-            <Image Source="{StaticResource kofi_button_strokeDrawingImage}" x:Name="KofiImage" />
-        </HyperlinkButton>
-
-        <TextBlock
-            Classes="txt"
-            FontFamily="/Assets/Fonts/Roboto-Bold.ttf#Roboto"
-            FontSize="16"
-            Foreground="{StaticResource SecondaryTextColor}"
-            HorizontalAlignment="Center"
-            Margin="0,5,0,5"
-            Text="{CompiledBinding Credits}" />
-
-        <HyperlinkButton
-            HorizontalAlignment="Center"
-            Margin="0,1,0,1"
-            NavigateUri="https://github.com/AvaloniaUI/Avalonia"
-            ToolTip.Tip="https://github.com/AvaloniaUI/Avalonia">
             <TextBlock
                 Classes="txt"
+                FontFamily="/Assets/Fonts/Roboto-Bold.ttf#Roboto"
+                FontSize="16"
                 Foreground="{StaticResource SecondaryTextColor}"
-                Text="Avalonia" />
-        </HyperlinkButton>
+                HorizontalAlignment="Center"
+                Margin="0,5,0,5"
+                Text="{CompiledBinding Credits}" />
 
-        <HyperlinkButton
-            HorizontalAlignment="Center"
-            Margin="0,1,0,1"
-            NavigateUri="https://github.com/dlemstra/Magick.NET"
-            ToolTip.Tip="https://github.com/dlemstra/Magick.NET">
-            <TextBlock
-                Classes="txt"
-                Foreground="{StaticResource SecondaryTextColor}"
-                Text="ImageMagick" />
-        </HyperlinkButton>
+            <HyperlinkButton
+                HorizontalAlignment="Center"
+                Margin="0,1,0,1"
+                NavigateUri="https://github.com/AvaloniaUI/Avalonia"
+                ToolTip.Tip="https://github.com/AvaloniaUI/Avalonia">
+                <TextBlock
+                    Classes="txt"
+                    Foreground="{StaticResource SecondaryTextColor}"
+                    Text="Avalonia" />
+            </HyperlinkButton>
 
-        <HyperlinkButton
-            HorizontalAlignment="Center"
-            Margin="0,1,0,1"
-            NavigateUri="http://Ionicons.com/"
-            ToolTip.Tip="http://Ionicons.com/">
-            <TextBlock
-                Classes="txt"
-                Foreground="{StaticResource SecondaryTextColor}"
-                Text="Ioinicons" />
-        </HyperlinkButton>
+            <HyperlinkButton
+                HorizontalAlignment="Center"
+                Margin="0,1,0,1"
+                NavigateUri="https://github.com/dlemstra/Magick.NET"
+                ToolTip.Tip="https://github.com/dlemstra/Magick.NET">
+                <TextBlock
+                    Classes="txt"
+                    Foreground="{StaticResource SecondaryTextColor}"
+                    Text="ImageMagick" />
+            </HyperlinkButton>
 
-        <HyperlinkButton
-            HorizontalAlignment="Center"
-            Margin="0,1,0,1"
-            NavigateUri="https://fontawesome.com/"
-            ToolTip.Tip="https://fontawesome.com/">
-            <TextBlock
-                Classes="txt"
-                Foreground="{StaticResource SecondaryTextColor}"
-                Text="Font Awesome" />
-        </HyperlinkButton>
+            <HyperlinkButton
+                HorizontalAlignment="Center"
+                Margin="0,1,0,1"
+                NavigateUri="http://Ionicons.com/"
+                ToolTip.Tip="http://Ionicons.com/">
+                <TextBlock
+                    Classes="txt"
+                    Foreground="{StaticResource SecondaryTextColor}"
+                    Text="Ioinicons" />
+            </HyperlinkButton>
 
-        <HyperlinkButton
-            HorizontalAlignment="Center"
-            Margin="0,1,0,1"
-            NavigateUri="https://lucide.dev/"
-            ToolTip.Tip="https://lucide.dev/">
-            <TextBlock
-                Classes="txt"
-                Foreground="{StaticResource SecondaryTextColor}"
-                Text="Lucide" />
-        </HyperlinkButton>
-    </StackPanel>
+            <HyperlinkButton
+                HorizontalAlignment="Center"
+                Margin="0,1,0,1"
+                NavigateUri="https://fontawesome.com/"
+                ToolTip.Tip="https://fontawesome.com/">
+                <TextBlock
+                    Classes="txt"
+                    Foreground="{StaticResource SecondaryTextColor}"
+                    Text="Font Awesome" />
+            </HyperlinkButton>
+
+            <HyperlinkButton
+                HorizontalAlignment="Center"
+                Margin="0,1,0,1"
+                NavigateUri="https://lucide.dev/"
+                ToolTip.Tip="https://lucide.dev/">
+                <TextBlock
+                    Classes="txt"
+                    Foreground="{StaticResource SecondaryTextColor}"
+                    Text="Lucide" />
+            </HyperlinkButton>
+        </StackPanel>
+    </Panel>
 </UserControl>
\ No newline at end of file
diff --git a/src/PicView.Avalonia/Views/AboutView.axaml.cs b/src/PicView.Avalonia/Views/AboutView.axaml.cs
index aee095bf..ada6e413 100644
--- a/src/PicView.Avalonia/Views/AboutView.axaml.cs
+++ b/src/PicView.Avalonia/Views/AboutView.axaml.cs
@@ -44,7 +44,20 @@ public AboutView()
             // TODO: replace with auto update service
             UpdateButton.Click += async (_, _) =>
             {
-                await UpdateManager.UpdateCurrentVersion(DataContext as MainViewModel);
+                //Set loading and prevent user from interacting with UI
+                ParentContainer.Opacity = .1;
+                ParentContainer.IsHitTestVisible = false;
+                SpinWaiter.IsVisible = true;
+                try
+                {
+                    await UpdateManager.UpdateCurrentVersion(DataContext as MainViewModel);
+                }
+                finally
+                {
+                    SpinWaiter.IsVisible = false;
+                    ParentContainer.IsHitTestVisible = true;
+                    ParentContainer.Opacity = 1;
+                }
             };
         };
     }