From e3aff227bcc651da31002e67496597d59d1ff73d Mon Sep 17 00:00:00 2001 From: wangyu Date: Wed, 15 Nov 2023 09:36:28 +0800 Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0Loading=E7=95=8C=E9=9D=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../wwwroot/index.html | 6 +- .../Sinet.Universal.Admin.RCL/App.razor | 13 ++++- .../wwwroot/css/site.css | 58 +++++++++++++++++++ .../wwwroot/js/app.js | 9 +++ .../Pages/_Host.cshtml | 7 ++- 5 files changed, 87 insertions(+), 6 deletions(-) create mode 100644 src/common/Sinet.Universal.Admin.RCL/wwwroot/js/app.js diff --git a/src/client/Sinet.Universal.Admin.Client/wwwroot/index.html b/src/client/Sinet.Universal.Admin.Client/wwwroot/index.html index 3ce234e..5e95d29 100644 --- a/src/client/Sinet.Universal.Admin.Client/wwwroot/index.html +++ b/src/client/Sinet.Universal.Admin.Client/wwwroot/index.html @@ -14,11 +14,10 @@ - - +
-
Loading...
+
An unhandled error has occurred. @@ -27,6 +26,7 @@
+ diff --git a/src/common/Sinet.Universal.Admin.RCL/App.razor b/src/common/Sinet.Universal.Admin.RCL/App.razor index 93fea69..b2ada76 100644 --- a/src/common/Sinet.Universal.Admin.RCL/App.razor +++ b/src/common/Sinet.Universal.Admin.RCL/App.razor @@ -30,7 +30,9 @@ -@code{ +@code { + [Inject] + private IJSRuntime _jsRuntime { get; set; } [Inject] IAppService appService { get; set; } @@ -46,6 +48,15 @@ base.OnInitialized(); } + protected override async Task OnAfterRenderAsync(bool firstRender) + { + if (firstRender) + { + await _jsRuntime.InvokeAsync("app.loadingStop"); + } + await base.OnAfterRenderAsync(firstRender); + } + private void OnHandle(Exception exception) { _exception = exception; diff --git a/src/common/Sinet.Universal.Admin.RCL/wwwroot/css/site.css b/src/common/Sinet.Universal.Admin.RCL/wwwroot/css/site.css index 3afadc2..97020fb 100644 --- a/src/common/Sinet.Universal.Admin.RCL/wwwroot/css/site.css +++ b/src/common/Sinet.Universal.Admin.RCL/wwwroot/css/site.css @@ -1,3 +1,61 @@ +.preloadbody { + display: flex; + align-items: center; + justify-content: center; + height: 100vh; +} + +.loader, +.loader:after { + border-radius: 50%; + width: 10em; + height: 10em; +} + +.loader { + font-size: 10px; + margin-top: -30px; + position: relative; + text-indent: -9999em; + border-top: 1.1em solid rgba(50,108,243, 0.2); + border-right: 1.1em solid rgba(50,108,243, 0.2); + border-bottom: 1.1em solid rgba(50,108,243, 0.2); + border-left: 1.1em solid #326cf3; + -webkit-transform: translateZ(0); + -ms-transform: translateZ(0); + transform: translateZ(0); + -webkit-animation: load8 1.1s infinite linear; + animation: load8 1.1s infinite linear; +} + +@-webkit-keyframes load8 { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + + 100% { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } +} + +@keyframes load8 { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + + 100% { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } +} + +.loader > * { + display: none; +} + #blazor-error-ui { background: lightyellow; bottom: 0; diff --git a/src/common/Sinet.Universal.Admin.RCL/wwwroot/js/app.js b/src/common/Sinet.Universal.Admin.RCL/wwwroot/js/app.js new file mode 100644 index 0000000..f68e059 --- /dev/null +++ b/src/common/Sinet.Universal.Admin.RCL/wwwroot/js/app.js @@ -0,0 +1,9 @@ +window.app = { + loadingStart: () => { + document.getElementById("app").classList.add("loader") + }, + loadingStop: () => { + document.getElementById("app").classList.remove("loader") + document.body.classList.remove('preloadbody'); + } +} \ No newline at end of file diff --git a/src/server/Sinet.Universal.Admin.Server.Host/Pages/_Host.cshtml b/src/server/Sinet.Universal.Admin.Server.Host/Pages/_Host.cshtml index c6d0c3c..6921510 100644 --- a/src/server/Sinet.Universal.Admin.Server.Host/Pages/_Host.cshtml +++ b/src/server/Sinet.Universal.Admin.Server.Host/Pages/_Host.cshtml @@ -30,9 +30,11 @@ - + - +
+ +
@@ -47,6 +49,7 @@ @* *@ +