♻️ Mobile | Improve loading animation when awaiting quiz results (#686)

* Add Sophie Animation while Submitting Quiz Answers * Update SkiaSharp version * Update with Jaydens feedback * Move quiz result pending animation into own popup * Disable font auto scaling on quiz result pending text --------- Co-authored-by: Tylah Kapa <[email protected]>
SSWConsulting · Feb 15, 2024 · 53a09d4 · 53a09d4
1 parent 93bc647
commit 53a09d4
Show file tree

Hide file tree

Showing 6 changed files with 120 additions and 6 deletions.
diff --git a/src/MobileUI/MobileUI.csproj b/src/MobileUI/MobileUI.csproj
@@ -83,7 +83,7 @@
 		<PackageReference Include="Newtonsoft.Json" Version="13.0.3" />
 		<PackageReference Include="SkiaSharp.Views.Maui.Core" Version="2.88.7" />
 		<PackageReference Include="SkiaSharp.Views.Maui.Controls" Version="2.88.7" />
-		<PackageReference Include="SkiaSharp.Extended.UI.Maui" Version="2.0.0-preview.61" />
+		<PackageReference Include="SkiaSharp.Extended.UI.Maui" Version="2.0.0-preview.86" />
 		<PackageReference Include="System.IdentityModel.Tokens.Jwt" Version="7.2.0" />
 		<PackageReference Include="ZXing.Net.Maui.Controls" Version="0.4.0" />
 	</ItemGroup>
@@ -116,6 +116,10 @@
 		  <DependentUpon>GoButton.xaml</DependentUpon>
 		  <SubType>Code</SubType>
 		</Compile>
+		<Compile Update="PopupPages\QuizResultPending.xaml.cs">
+		  <DependentUpon>QuizResultPending.xaml</DependentUpon>
+		  <SubType>Code</SubType>
+		</Compile>
 	</ItemGroup>
 
 	<!-- TODO: Do we need this? -->
@@ -136,6 +140,9 @@
 		  <SubType>Designer</SubType>
 		  <Generator>MSBuild:Compile</Generator>
 		</MauiXaml>
+		<MauiXaml Update="PopupPages\QuizResultPending.xaml">
+		  <SubType>Designer</SubType>
+		</MauiXaml>
 	</ItemGroup>
 
 	<!--https://github.com/dotnet/maui/issues/16514-->

diff --git a/src/MobileUI/Pages/EarnDetailsPage.xaml b/src/MobileUI/Pages/EarnDetailsPage.xaml
@@ -178,14 +178,13 @@
                                 BackgroundColor="{StaticResource SSWRed}"
                                 WidthRequest="80" />
                     </Grid>
-
+                    
                     <ActivityIndicator HorizontalOptions="Center"
                                        VerticalOptions="Center"
                                        Color="{StaticResource SSWRed}"
                                        IsVisible="{Binding IsBusy}"
                                        IsRunning="{Binding IsBusy}"
                                        Grid.Row="5" />
-
                 </Grid>
 
                 <!-- Results -->

diff --git a/src/MobileUI/PopupPages/QuizResultPending.xaml b/src/MobileUI/PopupPages/QuizResultPending.xaml
@@ -0,0 +1,63 @@
+<?xml version="1.0" encoding="UTF-8"?>
+
+<pages:PopupPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
+                 xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+                 xmlns:pages="clr-namespace:Mopups.Pages;assembly=Mopups"
+                 xmlns:lottie="clr-namespace:SkiaSharp.Extended.UI.Controls;assembly=SkiaSharp.Extended.UI"
+                 xmlns:viewModels="clr-namespace:SSW.Rewards.Mobile.ViewModels"
+                 x:Class="SSW.Rewards.Mobile.PopupPages.QuizResultPending"
+                 x:DataType="viewModels:ScanResultViewModel"
+                 BackgroundColor="#80000000"
+                 CloseWhenBackgroundIsClicked="False">
+    <Border
+        HorizontalOptions="Center"
+        VerticalOptions="Center"
+        HeightRequest="300"
+        WidthRequest="300"
+        Padding="10"
+        Stroke="{StaticResource BorderDefault}"
+        BackgroundColor="{StaticResource Background}">
+        <Border.StrokeShape>
+            <RoundRectangle CornerRadius="8" />
+        </Border.StrokeShape>
+        <VerticalStackLayout HorizontalOptions="Fill"
+                             VerticalOptions="Start">
+            <Label TextColor="White"
+                   HeightRequest="30"
+                   HorizontalTextAlignment="Center"
+                   VerticalTextAlignment="Center"
+                   FontAutoScalingEnabled="False"
+                   Text="Loading results..."
+                   Style="{StaticResource LabelBold}"
+                   FontSize="20"
+                   HorizontalOptions="Center"
+                   VerticalOptions="Center" />
+            <lottie:SKLottieView
+                VerticalOptions="Center"
+                Source="Sophie.json"
+                IsAnimationEnabled="True"
+                RepeatMode="Restart"
+                RepeatCount="100"
+                WidthRequest="200"
+                HeightRequest="200" />
+            <HorizontalStackLayout WidthRequest="280" HeightRequest="50" HorizontalOptions="Start"
+                                   VerticalOptions="Center">
+                <Image HorizontalOptions="Center"
+                       VerticalOptions="Center"
+                       HeightRequest="50"
+                       WidthRequest="40"
+                       Source="openai" />
+                <Label x:Name="LoadingText"
+                       TextColor="White"
+                       Margin="10,0,0,0"
+                       HeightRequest="50"
+                       HorizontalTextAlignment="Start"
+                       FontAutoScalingEnabled="False"
+                       VerticalTextAlignment="Center"
+                       WidthRequest="220"
+                       FontSize="18"
+                       VerticalOptions="Center" />
+            </HorizontalStackLayout>
+        </VerticalStackLayout>
+    </Border>
+</pages:PopupPage>
diff --git a/src/MobileUI/PopupPages/QuizResultPending.xaml.cs b/src/MobileUI/PopupPages/QuizResultPending.xaml.cs
@@ -0,0 +1,26 @@
+using Mopups.Pages;
+
+namespace SSW.Rewards.Mobile.PopupPages;
+
+public partial class QuizResultPending : PopupPage
+{
+    private List<string> _loadingPhrases =
+    [
+        "Summoning answers from our quiz master!",
+        "Extracting brilliance from our genius AI companion!",
+        "Harvesting insights from the all-knowing AI guru!",
+        "Retrieving wisdom from the depths of the AI genius!",
+        "Snatching enlightenment from our brainy AI overlord!"
+    ];
+
+    public QuizResultPending()
+    {
+        InitializeComponent();
+    }
+
+    protected override void OnAppearing()
+    {
+        base.OnAppearing();
+        LoadingText.Text = _loadingPhrases[new Random().Next(_loadingPhrases.Count)];
+    }
+}
diff --git a/src/MobileUI/Resources/Images/openai.svg b/src/MobileUI/Resources/Images/openai.svg
diff --git a/src/MobileUI/ViewModels/EarnDetailsViewModel.cs b/src/MobileUI/ViewModels/EarnDetailsViewModel.cs
@@ -3,7 +3,9 @@
 using System.Windows.Input;
 using CommunityToolkit.Mvvm.ComponentModel;
 using CommunityToolkit.Mvvm.Messaging;
+using Mopups.Services;
 using SSW.Rewards.Mobile.Messages;
+using SSW.Rewards.Mobile.PopupPages;
 using SSW.Rewards.Shared.DTOs.Quizzes;
 
 namespace SSW.Rewards.Mobile.ViewModels
@@ -15,6 +17,20 @@ public partial class EarnDetailsViewModel : BaseViewModel
         private int _quizId;
         private string _quizIcon;
         private int _submissionId;
+        private List<string> _loadingPhrases = new ()
+        {
+            "Summoning answers from our quiz master!",
+            "Extracting brilliance from our genius AI companion!",
+            "Harvesting insights from the all-knowing AI guru!",
+            "Retrieving wisdom from the depths of the AI genius!",
+            "Snatching enlightenment from our brainy AI overlord!"
+        };
+
+        [ObservableProperty]
+        private string _animRef = "Sophie.json";
+
+        [ObservableProperty]
+        private string _loadingText = "Loading...";
 
         public ObservableCollection<EarnQuestionViewModel> Questions { get; } = [];
 
@@ -147,22 +163,23 @@ private async Task SubmitResponses()
 
             if (allQuestionsAnswered)
             {
-                IsBusy = true;
+                var popup = new QuizResultPending();
+                await MopupService.Instance.PushAsync(popup);
 
                 var isComplete = await AwaitQuizCompletion();
 
                 if (!isComplete)
                 {
                     await App.Current.MainPage.DisplayAlert("Pending Results", $"Your quiz results are still being processed. Please try again.", "OK");
                     IsBusy = false;
+                    await MopupService.Instance.RemovePageAsync(popup);
                     return;
                 }
 
                 var result = await _quizService.GetQuizResults(_submissionId);
 
-                IsBusy = false;
-
                 await ProcessResult(result);
+                await MopupService.Instance.RemovePageAsync(popup);
             }
             else
             {