Skip to content

Commit

Permalink
Merge pull request #482 from bakes82/LoadingScreen
Browse files Browse the repository at this point in the history 
[Feature] Loading Screen Component
  • Loading branch information
@neozhu
neozhu authored Aug 24, 2023
2 parents 00af761 + 398df60 commit 051fced
Show file tree
Hide file tree
Showing 4 changed files with 218 additions and 41 deletions.
29 changes: 19 additions & 10 deletions src/Application/Common/Configurations/DashbordSettings.cs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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";

}
}
80 changes: 49 additions & 31 deletions src/Blazor.Server.UI/App.razor
View file
Original file line number Diff line number Diff line change
@@ -1,33 +1,51 @@

@using Blazor.Server.UI.Services.Layout
@inject IStringLocalizer<SharedResource> L
<Fluxor.Blazor.Web.StoreInitializer />
<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>
</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);
}

</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>
}
148 changes: 148 additions & 0 deletions src/Blazor.Server.UI/Components/Shared/LoadingScreen.razor
View file
Original file line number Diff line number Diff line change
@@ -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;
}
}
2 changes: 2 additions & 0 deletions src/Blazor.Server.UI/appsettings.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,8 @@
"Resilience": false
},
"DashboardSettings": {
"EnableLoadingScreen": true,
"LoadingScreenDuration": 3000,
"Version": "1.3.0",
"App": "Blazor",
"AppName": "Blazor Dashboard",
Expand Down

0 comments on commit 051fced

Please sign in to comment.