Merge pull request #112 from nullinside-development-group/feat/loading

feat: adding loading icons to login

Author: ProgrammingByPermutation

src/TwitchStreamingTools/ViewModels/Pages/AccountViewModel.cs

@@ -56,11 +56,21 @@ public class AccountViewModel : PageViewModelBase, IDisposable {
   /// </summary>
   private readonly ITwitchAccountService _twitchAccountService;
 
+  /// <summary>
+  ///   True if currently downloading the logged in user's profile photo, false otherwise.
+  /// </summary>
+  private bool _downloadingProfileImage;
+
   /// <summary>
   ///   True if we have a valid OAuth token, false otherwise.
   /// </summary>
   private bool _hasValidOAuthToken;
 
+  /// <summary>
+  ///   True if currently in the logging in process, false otherwise.
+  /// </summary>
+  private bool _loggingIn;
+
   /// <summary>
   ///   The profile image of the logged in user.
   /// </summary>
@@ -110,6 +120,22 @@ public Bitmap? ProfileImage {
   /// </summary>
   public ReactiveCommand<Unit, Unit> OnLogout { get; }
 
+  /// <summary>
+  ///   True if currently in the logging in process, false otherwise.
+  /// </summary>
+  public bool LoggingIn {
+    get => _loggingIn;
+    set => this.RaiseAndSetIfChanged(ref _loggingIn, value);
+  }
+
+  /// <summary>
+  ///   True if currently downloading the logged in user's profile photo, false otherwise.
+  /// </summary>
+  public bool DownloadingProfileImage {
+    get => _downloadingProfileImage;
+    set => this.RaiseAndSetIfChanged(ref _downloadingProfileImage, value);
+  }
+
   /// <summary>
   ///   True if we have a valid OAuth token, false otherwise.
   /// </summary>
@@ -157,18 +183,21 @@ public override async void OnLoaded() {
   private async Task LoadProfileImage() {
     // Try to get the file locally.
     string? profileImagePath = string.Format(PROFILE_IMAGE_FILENAME, _configuration.TwitchUsername);
+    profileImagePath = Path.Combine(PROFILE_IMAGE_FOLDER, profileImagePath);
     if (File.Exists(profileImagePath)) {
       ProfileImage = new Bitmap(profileImagePath);
       return;
     }
 
     // If we couldn't find the file, download it.
+    DownloadingProfileImage = true;
     profileImagePath = await DownloadUserImage().ConfigureAwait(false);
     if (null == profileImagePath) {
       return;
     }
 
     ProfileImage = new Bitmap(profileImagePath);
+    DownloadingProfileImage = false;
   }
 
   /// <summary>
@@ -213,6 +242,7 @@ private void OnCredentialsStatusChanged(bool valid) {
   ///   Launches the computer's default browser to generate an OAuth token.
   /// </summary>
   private async void PerformLogin() {
+    LoggingIn = true;
     try {
       CancellationToken token = CancellationToken.None;
 
@@ -252,6 +282,9 @@ private async void PerformLogin() {
     catch (Exception ex) {
       _logger.Error("Failed to launch browser to login", ex);
     }
+    finally {
+      LoggingIn = false;
+    }
   }
 
   /// <summary>

src/TwitchStreamingTools/Views/Pages/AccountView.axaml

@@ -3,6 +3,7 @@
              xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
              xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
              xmlns:pages="clr-namespace:TwitchStreamingTools.ViewModels.Pages"
+             xmlns:controls="clr-namespace:TwitchStreamingTools.Controls"
              mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
              x:Class="TwitchStreamingTools.Views.Pages.AccountView"
              x:DataType="pages:AccountViewModel">
@@ -24,16 +25,19 @@
                     DockPanel.Dock="Top"
                     Spacing="15">
             <Image Width="200" Source="/Assets/twitch-wordart.png" />
+            <controls:Loading IsVisible="{Binding !LoggingIn}" Width="50" Height="50" />
             <Button IsVisible="{Binding !HasValidOAuthToken}"
+                    IsEnabled="{Binding !LoggingIn}"
                     Command="{Binding OnPerformLogin}"
                     HorizontalAlignment="Center"
                     VerticalContentAlignment="Top">
                 Login
             </Button>
-            <Border CornerRadius="75" Width="150" ClipToBounds="True">
-                <Image Source="{Binding ProfileImage}" />
-            </Border>
             <StackPanel IsVisible="{Binding HasValidOAuthToken}" Spacing="5">
+                <controls:Loading IsVisible="{Binding DownloadingProfileImage}" />
+                <Border CornerRadius="75" Width="150" ClipToBounds="True" IsVisible="{Binding !DownloadingProfileImage}">
+                    <Image Source="{Binding ProfileImage}" />
+                </Border>
                 <Grid>
                     <Grid.ColumnDefinitions>
                         <ColumnDefinition Width="Auto" />