From 771b72696618bff28160de23efcc047118c11434 Mon Sep 17 00:00:00 2001
From: bakes82 <bradley.j.baker.1982@gmail.com>
Date: Thu, 24 Aug 2023 00:19:08 -0400
Subject: [PATCH 1/2] Add Loading Screen Component.

---
 src/Blazor.Server.UI/App.razor                |  13 ++
 .../Components/Shared/LoadingScreen.razor     | 148 ++++++++++++++++++
 2 files changed, 161 insertions(+)
 create mode 100644 src/Blazor.Server.UI/Components/Shared/LoadingScreen.razor

diff --git a/src/Blazor.Server.UI/App.razor b/src/Blazor.Server.UI/App.razor
index ff8ad08e6..7ea044605 100644
--- a/src/Blazor.Server.UI/App.razor
+++ b/src/Blazor.Server.UI/App.razor
@@ -1,6 +1,8 @@
+@using Blazor.Server.UI.Services.Layout
 
 @inject IStringLocalizer<SharedResource> L
 <Fluxor.Blazor.Web.StoreInitializer />
+<LoadingScreen LayoutService="LayoutService" LoadingDelayMs="3000">
 <CascadingAuthenticationState>
     <Router AppAssembly="@typeof(App).Assembly">
         <Found Context="routeData">
@@ -31,3 +33,14 @@
         </NotFound>
     </Router>
 </CascadingAuthenticationState>
+</LoadingScreen>
+@code{
+    [Inject] private LayoutService LayoutService { get; set; }
+    
+    protected override async Task OnInitializedAsync()
+    {
+        await base.OnInitializedAsync();
+        LayoutService.SetBaseTheme(Theme.Theme.ApplicationTheme());
+        await LayoutService.ApplyUserPreferences(true);
+    }
+}
\ No newline at end of file
diff --git a/src/Blazor.Server.UI/Components/Shared/LoadingScreen.razor b/src/Blazor.Server.UI/Components/Shared/LoadingScreen.razor
new file mode 100644
index 000000000..ac0516624
--- /dev/null
+++ b/src/Blazor.Server.UI/Components/Shared/LoadingScreen.razor
@@ -0,0 +1,148 @@
+@using Blazor.Server.UI.Services.Layout
+@inherits LayoutComponentBase
+
+@if (_isLoaded)
+{
+    @ChildContent
+}
+else
+{
+    var randomNumber = new Random().Next(-45, -15) + "%";
+    var randomNumber2 = new Random().Next(10, 30) + "%";
+    <div id="app">
+        <style>
+            @@keyframes slide {
+                0% {
+                    transform: translateX(@randomNumber);
+                }
+                100% {
+                    transform: translateY(@randomNumber2);
+                }
+            }
+
+            .loadScreen-animation {
+                animation: slide 3s ease-in-out infinite alternate;
+                bottom: 0;
+                left: -50%;
+                opacity: .5;
+                position: fixed;
+                right: -50%;
+                top: 0;
+                z-index: -1;
+            }
+
+            .loadScreen-animation-cont {
+                left: 50%;
+                padding: 10vmin;
+                position: fixed;
+                text-align: center;
+                top: 50%;
+                transform: translate(-50%, -50%);
+            }
+            
+            svg {
+            	position: fixed;
+            	top: 50%;
+            	left: 50%;
+            	transform: translate(-50%, -50%);
+            	height: 150px;
+            	width: 150px;
+            }
+        </style>
+
+        <div style="height:100%;width:100%;margin:0;position:fixed;background-color:@(LayoutService.IsDarkMode ? LayoutService.CurrentTheme.PaletteDark.Background : LayoutService.CurrentTheme.Palette.Background)">
+            <div class="loadScreen-animation"></div>
+            <div class="loadScreen-animation" style="@Gradient animation-direction:alternate-reverse;animation-duration:2s;"></div>
+            <div class="loadScreen-animation" style="@Gradient animation-duration:5s;"></div>
+            <div class="loadScreen-animation-cont">
+                <svg viewBox="0 0 100 100">
+                    <g fill="none" stroke="@(LayoutService.IsDarkMode ? LayoutService.CurrentTheme.PaletteDark.Primary : LayoutService.CurrentTheme.Palette.Primary)" stroke-linecap="round" stroke-linejoin="round" stroke-width="6">
+                        <!-- left line -->
+                        <path d="M 21 40 V 59">
+                            <animateTransform
+                                attributeName="transform"
+                                attributeType="XML"
+                                type="rotate"
+                                values="0 21 59; 180 21 59"
+                                dur="2s"
+                                repeatCount="indefinite"/>
+                        </path>
+                        <!-- right line -->
+                        <path d="M 79 40 V 59">
+                            <animateTransform
+                                attributeName="transform"
+                                attributeType="XML"
+                                type="rotate"
+                                values="0 79 59; -180 79 59"
+                                dur="2s"
+                                repeatCount="indefinite"/>
+                        </path>
+                        <!-- top line -->
+                        <path d="M 50 21 V 40">
+                            <animate
+                                attributeName="d"
+                                values="M 50 21 V 40; M 50 59 V 40"
+                                dur="2s"
+                                repeatCount="indefinite"/>
+                        </path>
+                        <!-- btm line -->
+                        <path d="M 50 60 V 79">
+                            <animate
+                                attributeName="d"
+                                values="M 50 60 V 79; M 50 98 V 79"
+                                dur="2s"
+                                repeatCount="indefinite"/>
+                        </path>
+                        <!-- top box -->
+                        <path d="M 50 21 L 79 40 L 50 60 L 21 40 Z">
+                            <animate
+                                attributeName="stroke"
+                                values="rgba(255,255,255,1); rgba(100,100,100,0)"
+                                dur="2s"
+                                repeatCount="indefinite"/>
+                        </path>
+                        <!-- mid box -->
+                        <path d="M 50 40 L 79 59 L 50 79 L 21 59 Z"/>
+                        <!-- btm box -->
+                        <path d="M 50 59 L 79 78 L 50 98 L 21 78 Z">
+                            <animate
+                                attributeName="stroke"
+                                values="rgba(100,100,100,0); rgba(255,255,255,1)"
+                                dur="2s"
+                                repeatCount="indefinite"/>
+                        </path>
+                        <animateTransform
+                            attributeName="transform"
+                            attributeType="XML"
+                            type="translate"
+                            values="0 0; 0 -19"
+                            dur="2s"
+                            repeatCount="indefinite"/>
+                    </g>
+                </svg>
+            </div>
+        </div>
+    </div>
+}
+
+@code {
+
+    [Parameter]
+    public RenderFragment ChildContent { get; set; }
+
+    [Parameter]
+    public LayoutService LayoutService { get; set; }
+    
+    [Parameter]
+    public int LoadingDelayMs { get; set; }
+
+    private bool _isLoaded;
+
+    private string Gradient => $"background-image: linear-gradient(-120deg, {(LayoutService.IsDarkMode ? LayoutService.CurrentTheme.PaletteDark.Background : LayoutService.CurrentTheme.Palette.Background)} 50%, {(LayoutService.IsDarkMode ? LayoutService.CurrentTheme.PaletteDark.Surface : LayoutService.CurrentTheme.Palette.Surface)} 50%);";
+
+    protected override async Task OnInitializedAsync()
+    {
+        await Task.Delay(LoadingDelayMs);
+        _isLoaded = true;
+    }
+}
\ No newline at end of file

From 398df606b02ef7026fc01cc95625219528d58929 Mon Sep 17 00:00:00 2001
From: Bram1903 <70259613+Bram1903@users.noreply.github.com>
Date: Thu, 24 Aug 2023 11:19:40 +0200
Subject: [PATCH 2/2] Add configurable loading screen duration

A change was made to the App.razor, DashboardSettings.cs, and appsettings.json files to add a configurable loading screen duration setting in the application. Now, users can adjust the duration of the loading screen according to their preferences. This change makes the application more customizable and user-friendly.
---
 .../Common/Configurations/DashbordSettings.cs | 29 +++++---
 src/Blazor.Server.UI/App.razor                | 73 ++++++++++---------
 src/Blazor.Server.UI/appsettings.json         |  2 +
 3 files changed, 60 insertions(+), 44 deletions(-)

diff --git a/src/Application/Common/Configurations/DashbordSettings.cs b/src/Application/Common/Configurations/DashbordSettings.cs
index 8471eeeb3..afb00513f 100644
--- a/src/Application/Common/Configurations/DashbordSettings.cs
+++ b/src/Application/Common/Configurations/DashbordSettings.cs
@@ -13,41 +13,50 @@ public class DashboardSettings
     /// </summary>
     public const string Key = nameof(DashboardSettings);
 
+    /// <summary>
+    ///     Specifies whether to enable the loading screen
+    /// </summary>
+    public bool EnableLoadingScreen { get; set; } = true;
+
+    /// <summary>
+    ///     Specifies the duration of the loading screen in milliseconds
+    /// </summary>
+    public int LoadingScreenDuration { get; set; } = 3000;
+
     /// <summary>
     ///     Current application version
     /// </summary>
     public string Version { get; set; } = "1.3.0";
-    
+
     /// <summary>
     ///     Application framework
     /// </summary>
-    
+
     public string App { get; set; } = "Blazor";
-    
+
     /// <summary>
     ///     The application name / title
     /// </summary>
     public string AppName { get; set; } = "Blazor Dashboard";
-    
+
     /// <summary>
     ///     Application framework including the version
     /// </summary>
-    
+
     public string AppFlavor { get; set; } = "Blazor .NET 7.0";
-    
+
     /// <summary>
     ///     Application .NET version
     /// </summary>
     public string AppFlavorSubscript { get; set; } = ".NET 7";
-    
+
     /// <summary>
     ///     The name of the company
     /// </summary>
     public string Company { get; set; } = "Company";
-    
+
     /// <summary>
     ///     Copyright watermark
     /// </summary>
     public string Copyright { get; set; } = "@2023 Copyright";
- 
-}
+}
\ No newline at end of file
diff --git a/src/Blazor.Server.UI/App.razor b/src/Blazor.Server.UI/App.razor
index 7ea044605..5003f3432 100644
--- a/src/Blazor.Server.UI/App.razor
+++ b/src/Blazor.Server.UI/App.razor
@@ -1,46 +1,51 @@
 @using Blazor.Server.UI.Services.Layout
-
 @inject IStringLocalizer<SharedResource> L
-<Fluxor.Blazor.Web.StoreInitializer />
-<LoadingScreen LayoutService="LayoutService" LoadingDelayMs="3000">
-<CascadingAuthenticationState>
-    <Router AppAssembly="@typeof(App).Assembly">
-        <Found Context="routeData">
-            <AuthorizeRouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)">
-                <Authorizing>
-                    <text>@L["Please wait, we are authorizing you..."]</text>
-                </Authorizing>
-                <NotAuthorized>
-                    @if (@context.User.Identity?.IsAuthenticated??false)
-                    {
-                        <p>@L["You are not authorized to be here. For more information, contact your system administrator."]</p>
-                    }
-                    else
-                    {
-                        <Login />
-                    }
-                </NotAuthorized>
-            </AuthorizeRouteView>
+<Fluxor.Blazor.Web.StoreInitializer/>
+<LoadingScreen LayoutService="LayoutService" LoadingDelayMs="@(Settings.EnableLoadingScreen ? Settings.LoadingScreenDuration : 0)">
+    <CascadingAuthenticationState>
+        <Router AppAssembly="@typeof(App).Assembly">
+            <Found Context="routeData">
+                <AuthorizeRouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)">
+                    <Authorizing>
+                        <text>@L["Please wait, we are authorizing you..."]</text>
+                    </Authorizing>
+                    <NotAuthorized>
+                        @if (context.User.Identity?.IsAuthenticated ?? false)
+                        {
+                            <p>@L["You are not authorized to be here. For more information, contact your system administrator."]</p>
+                        }
+                        else
+                        {
+                            <Login/>
+                        }
+                    </NotAuthorized>
+                </AuthorizeRouteView>
 
-        </Found>
-        <NotFound>
-            <PageTitle>Not found</PageTitle>
-            <LayoutView Layout="@typeof(MainLayout)">
-                <MudContainer MaxWidth="MaxWidth.ExtraLarge" Class="d-flex" >
-                    <p role="alert">@L["Sorry, there's nothing at this address."] <MudButton Variant="Variant.Filled" Size="Size.Small" Link="/">@L["Go Home"]</MudButton></p>
-                </MudContainer>
-            </LayoutView>
-        </NotFound>
-    </Router>
-</CascadingAuthenticationState>
+            </Found>
+            <NotFound>
+                <PageTitle>Not found</PageTitle>
+                <LayoutView Layout="@typeof(MainLayout)">
+                    <MudContainer MaxWidth="MaxWidth.ExtraLarge" Class="d-flex">
+                        <p role="alert">
+                            @L["Sorry, there's nothing at this address."] <MudButton Variant="Variant.Filled" Size="Size.Small" Link="/">@L["Go Home"]</MudButton>
+                        </p>
+                    </MudContainer>
+                </LayoutView>
+            </NotFound>
+        </Router>
+    </CascadingAuthenticationState>
 </LoadingScreen>
+
 @code{
-    [Inject] private LayoutService LayoutService { get; set; }
-    
+
+    [Inject]
+    private LayoutService LayoutService { get; set; }
+
     protected override async Task OnInitializedAsync()
     {
         await base.OnInitializedAsync();
         LayoutService.SetBaseTheme(Theme.Theme.ApplicationTheme());
         await LayoutService.ApplyUserPreferences(true);
     }
+
 }
\ No newline at end of file
diff --git a/src/Blazor.Server.UI/appsettings.json b/src/Blazor.Server.UI/appsettings.json
index e23c7503e..9aa421ed1 100644
--- a/src/Blazor.Server.UI/appsettings.json
+++ b/src/Blazor.Server.UI/appsettings.json
@@ -25,6 +25,8 @@
     "Resilience": false
   },
   "DashboardSettings": {
+    "EnableLoadingScreen": true,
+    "LoadingScreenDuration": 3000,
     "Version": "1.3.0",
     "App": "Blazor",
     "AppName": "Blazor Dashboard",