Add loading animation

Author: justcoding121

src/Bible.Alarm/App.xaml.cs

@@ -7,7 +7,6 @@
 using Bible.Alarm.Views.General;
 using Bible.Alarm.ViewModels;
 using Bible.Alarm.ViewModels.Shared;
-#nullable enable
 
 namespace Bible.Alarm;
 

src/Bible.Alarm/Views/General/LoadingPage.xaml

@@ -6,17 +6,26 @@
     xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
     BackgroundColor="White"
     Title="Bible Alarm">
+    <ContentPage.Resources>
+        <Style x:Key="DotStyle" TargetType="Label">
+            <Setter Property="FontSize" Value="48" />
+            <Setter Property="TextColor" Value="SlateBlue" />
+            <Setter Property="HorizontalOptions" Value="Center" />
+            <Setter Property="VerticalOptions" Value="Center" />
+        </Style>
+    </ContentPage.Resources>
     <ContentPage.Content>
         <Grid>
             <StackLayout
                 HorizontalOptions="Center"
                 Orientation="Vertical"
-                VerticalOptions="Center">
+                VerticalOptions="Center"
+                Spacing="20">
                 <ActivityIndicator
                     IsRunning="True"
                     Color="SlateBlue"
-                    WidthRequest="100"
-                    HeightRequest="100">
+                    WidthRequest="80"
+                    HeightRequest="80">
                     <ActivityIndicator.Scale>
                         <OnPlatform x:TypeArguments="x:Double">
                             <OnPlatform.Platforms>
@@ -27,12 +36,27 @@
                         </OnPlatform>
                     </ActivityIndicator.Scale>
                 </ActivityIndicator>
-                <Label
-                    Text="Loading..."
-                    FontSize="Large"
+                
+                <!-- Animated loading dots -->
+                <HorizontalStackLayout
                     HorizontalOptions="Center"
-                    Margin="0,20,0,0"
-                    TextColor="SlateBlue" />
+                    Spacing="8">
+                    <Label
+                        x:Name="Dot1"
+                        Text="●"
+                        Style="{StaticResource DotStyle}"
+                        Opacity="0.3" />
+                    <Label
+                        x:Name="Dot2"
+                        Text="●"
+                        Style="{StaticResource DotStyle}"
+                        Opacity="0.3" />
+                    <Label
+                        x:Name="Dot3"
+                        Text="●"
+                        Style="{StaticResource DotStyle}"
+                        Opacity="0.3" />
+                </HorizontalStackLayout>
             </StackLayout>
         </Grid>
     </ContentPage.Content>

src/Bible.Alarm/Views/General/LoadingPage.xaml.cs

@@ -1,11 +1,64 @@
+using System.Timers;
+using Microsoft.Maui.ApplicationModel;
+
 namespace Bible.Alarm.Views.General;
 
 [XamlCompilation(XamlCompilationOptions.Compile)]
 public partial class LoadingPage : ContentPage
 {
+    private readonly System.Timers.Timer _animationTimer;
+    private int _currentDot = 0;
+
     public LoadingPage()
     {
         InitializeComponent();
+        
+        // Start animated dots
+        _animationTimer = new System.Timers.Timer(500); // Change dot every 500ms
+        _animationTimer.Elapsed += OnTimerElapsed;
+        _animationTimer.AutoReset = true;
+        _animationTimer.Start();
+        
+        // Initialize first dot
+        UpdateDots();
+    }
+
+    private void OnTimerElapsed(object? sender, ElapsedEventArgs e)
+    {
+        MainThread.BeginInvokeOnMainThread(() =>
+        {
+            _currentDot = (_currentDot + 1) % 3;
+            UpdateDots();
+        });
+    }
+
+    private void UpdateDots()
+    {
+        // Reset all dots to low opacity
+        Dot1.Opacity = 0.3;
+        Dot2.Opacity = 0.3;
+        Dot3.Opacity = 0.3;
+        
+        // Highlight current dot
+        switch (_currentDot)
+        {
+            case 0:
+                Dot1.Opacity = 1.0;
+                break;
+            case 1:
+                Dot2.Opacity = 1.0;
+                break;
+            case 2:
+                Dot3.Opacity = 1.0;
+                break;
+        }
+    }
+
+    protected override void OnDisappearing()
+    {
+        base.OnDisappearing();
+        _animationTimer?.Stop();
+        _animationTimer?.Dispose();
     }
 }