diff --git a/ClientSideBlazorWithPrerendering.Client/Shared/MainLayout.razor b/ClientSideBlazorWithPrerendering.Client/Shared/MainLayout.razor index 0f4e22a..9e690f4 100644 --- a/ClientSideBlazorWithPrerendering.Client/Shared/MainLayout.razor +++ b/ClientSideBlazorWithPrerendering.Client/Shared/MainLayout.razor @@ -1,5 +1,6 @@ @inherits LayoutComponentBase - +@inject IJSRuntime jsRuntime +@inject IComponentContext context
@@ -13,3 +14,14 @@ @Body + +@code { + + protected override async Task OnAfterRenderAsync() + { + if (context.IsConnected) + { + await jsRuntime.InvokeAsync("loadingOverlay.hide"); + } + } +} \ No newline at end of file diff --git a/ClientSideBlazorWithPrerendering.Client/wwwroot/css/loading.css b/ClientSideBlazorWithPrerendering.Client/wwwroot/css/loading.css new file mode 100644 index 0000000..850096f --- /dev/null +++ b/ClientSideBlazorWithPrerendering.Client/wwwroot/css/loading.css @@ -0,0 +1,38 @@ +.loading { + width: 100%; + height: 100%; + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + background-color: rgba(0,0,0,.5); +} + +.loading-wheel { + width: 20px; + height: 20px; + margin-top: -40px; + margin-left: -40px; + position: absolute; + top: 50%; + left: 50%; + border-width: 30px; + border-radius: 50%; + -webkit-animation: spin 1s linear infinite; +} + +.style-2 .loading-wheel { + border-style: double; + border-color: #ccc transparent; +} + +@-webkit-keyframes spin { + 0% { + -webkit-transform: rotate(0); + } + + 100% { + -webkit-transform: rotate(-360deg); + } +} diff --git a/ClientSideBlazorWithPrerendering.Client/wwwroot/loadingOverlay.js b/ClientSideBlazorWithPrerendering.Client/wwwroot/loadingOverlay.js new file mode 100644 index 0000000..f89f98d --- /dev/null +++ b/ClientSideBlazorWithPrerendering.Client/wwwroot/loadingOverlay.js @@ -0,0 +1,22 @@ +var loadingOverlay = (function () { + var loadingOverlay = {}; + + loadingOverlay.show = function () { + var loadingDiv = document.createElement("div"); + loadingDiv.className = "loading style-2"; + loadingDiv.id = "loading-container"; + var wheelDiv = document.createElement("div"); + wheelDiv.className = "loading-wheel"; + loadingDiv.appendChild(wheelDiv); + document.body.appendChild(loadingDiv); + } + + loadingOverlay.hide = function () { + var loadingContainer = document.getElementById("loading-container"); + if (loadingContainer) { + loadingContainer.remove(); + } + } + + return loadingOverlay; +})(); \ No newline at end of file diff --git a/ClientSideBlazorWithPrerendering.Server/Pages/_Host.cshtml b/ClientSideBlazorWithPrerendering.Server/Pages/_Host.cshtml index de0d522..5e0b152 100644 --- a/ClientSideBlazorWithPrerendering.Server/Pages/_Host.cshtml +++ b/ClientSideBlazorWithPrerendering.Server/Pages/_Host.cshtml @@ -21,10 +21,13 @@ integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" /> + - @(await Html.RenderStaticComponentAsync()) - - + + @(await Html.RenderStaticComponentAsync()) + + +