Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Feature] Loading Screen Component #482

Merged
merged 2 commits into from
Aug 24, 2023
Merged

[Feature] Loading Screen Component #482

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
771b726
Add Loading Screen Component.
bakes82 Aug 24, 2023
398df60
Add configurable loading screen duration
Bram1903 Aug 24, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 19 additions & 10 deletions src/Application/Common/Configurations/DashbordSettings.cs
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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