Skip to content

Improve Default Blazor WebAssembly Loading Experience #42548

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

Merged
dougbu merged 53 commits into from
Jul 16, 2022
Merged

Improve Default Blazor WebAssembly Loading Experience #42548

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
53 commits
Select commit Hold shift + click to select a range
6114f13
Added loader SVG and CSS styling
cerasamson Jun 28, 2022
6348f06
Merge branch 'main' into t-samsoncera/wasm-loading
cerasamson Jun 29, 2022
2cedbd0
Add WebAssemblyProgressService, WebAssemblyProgressReporter
cerasamson Jun 30, 2022
22577d0
Add styling for setProgress, fix resourcesTotal
cerasamson Jul 1, 2022
7132a87
Merge branch 'dotnet:main' into t-samsoncera/wasm-loading
cerasamson Jul 1, 2022
f495715
Implement singleton pattern, fix CSS styling
cerasamson Jul 1, 2022
3866f4b
Merge branch 't-samsoncera/wasm-loading' of https://github.com/cerasa…
cerasamson Jul 1, 2022
83c2a0b
Merge branch 'dotnet:main' into t-samsoncera/wasm-loading
cerasamson Jul 1, 2022
f52d023
Convert % text to SVG
cerasamson Jul 1, 2022
dc1ef85
Add WebAssemblyProgressService as IBlazor global export
cerasamson Jul 5, 2022
fba966d
Merge branch 'dotnet:main' into t-samsoncera/wasm-loading
cerasamson Jul 5, 2022
75e3d0d
Merge branch 't-samsoncera/wasm-loading' of https://github.com/cerasa…
cerasamson Jul 5, 2022
1e4b3fb
Modify CSS classes, added TSDoc to public methods
cerasamson Jul 5, 2022
f6b3282
Merge branch 'dotnet:main' into t-samsoncera/wasm-loading
cerasamson Jul 6, 2022
ee3cf88
Modify CSS element names
cerasamson Jul 6, 2022
0ee196f
Update src/Components/Web.JS/src/Boot.WebAssembly.ts
cerasamson Jul 7, 2022
340a8c6
Update src/Components/Web.JS/src/Platform/WebAssemblyProgressReporter.ts
cerasamson Jul 7, 2022
804e545
Check for additional resources; percentage styling
cerasamson Jul 7, 2022
835dc9a
Update app.css
cerasamson Jul 7, 2022
f2a2f60
Create global SetProgress, pass in ProgressService
cerasamson Jul 7, 2022
c9d2a83
Vertically center loading circle
cerasamson Jul 7, 2022
3b06578
Merge branch 'dotnet:main' into t-samsoncera/wasm-loading
cerasamson Jul 7, 2022
cd0b099
Update Boot.WebAssembly.ts
cerasamson Jul 8, 2022
1614acb
Merge branch 't-samsoncera/wasm-loading' of https://github.com/cerasa…
cerasamson Jul 8, 2022
d13c7ca
Update src/Components/Web.JS/src/Platform/WebAssemblyResourceLoader.ts
cerasamson Jul 8, 2022
6f0895a
Fix possible undefined wasmLoadingSetProgress
cerasamson Jul 8, 2022
bf631de
Remove setProgressFunction from GlobalExports
cerasamson Jul 8, 2022
e35f441
Merge branch 't-samsoncera/wasm-loading' of https://github.com/cerasa…
cerasamson Jul 8, 2022
f50f41c
Update blazor.server.js
cerasamson Jul 8, 2022
44d7937
Update src/Components/Web.JS/src/Platform/WebAssemblyProgressReporter.ts
cerasamson Jul 8, 2022
45c4d42
Update src/Components/Web.JS/src/Platform/Mono/MonoPlatform.ts
cerasamson Jul 8, 2022
14afbed
Update src/Components/Web.JS/src/Platform/WebAssemblyStartOptions.ts
cerasamson Jul 8, 2022
efd28aa
Remove progress ring transition duration
cerasamson Jul 8, 2022
3d883c5
Merge branch 'main' into t-samsoncera/wasm-loading
cerasamson Jul 8, 2022
d2f101d
Update src/Components/Web.JS/src/Platform/WebAssemblyStartOptions.ts
TanayParikh Jul 9, 2022
bfc924d
(WIP) Bring all .ts changes to MonoPlatform.ts
cerasamson Jul 12, 2022
8e1a62b
Remove reporter/service classes, update loading styling
cerasamson Jul 12, 2022
c3b4dba
Center percentage text
cerasamson Jul 12, 2022
233a26c
Update app.css
cerasamson Jul 12, 2022
dbd7621
Add additional checks for element types
cerasamson Jul 12, 2022
e946e6d
Prevent exception by changing to div id = "app"
cerasamson Jul 12, 2022
27d1e1d
Update src/Components/Web.JS/src/Platform/Mono/MonoPlatform.ts
cerasamson Jul 12, 2022
fbadf59
WIP remove CSS id
cerasamson Jul 13, 2022
c68257c
Concat promises for setProgress function
cerasamson Jul 13, 2022
d099167
Update src/Components/Web.JS/src/Platform/Mono/MonoPlatform.ts
cerasamson Jul 13, 2022
f25cf1d
Update src/Components/Web.JS/src/Platform/Mono/MonoPlatform.ts
cerasamson Jul 14, 2022
7ff63f3
CSS updates
cerasamson Jul 14, 2022
d023f0b
Update src/ProjectTemplates/Web.ProjectTemplates/content/ComponentsWe…
cerasamson Jul 14, 2022
4ca2cb5
Update src/Components/Web.JS/src/Platform/Mono/MonoPlatform.ts
cerasamson Jul 14, 2022
b552954
Update src/ProjectTemplates/Web.ProjectTemplates/content/ComponentsWe…
cerasamson Jul 14, 2022
a6c51d0
Add default "Loading" test
cerasamson Jul 14, 2022
80a0577
Update Templates.Blazor.WebAssembly.Tests.csproj
cerasamson Jul 15, 2022
34da8e4
Update Templates.Blazor.WebAssembly.Tests.csproj
cerasamson Jul 15, 2022
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
14 changes: 14 additions & 0 deletions src/Components/Web.JS/src/Platform/Mono/MonoPlatform.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -249,6 +249,14 @@ async function createEmscriptenModuleInstance(resourceLoader: WebAssemblyResourc
const existingPostRun = moduleConfig.postRun || [];
(moduleConfig as any).preloadPlugins = [];

let resourcesLoaded = 0;
function setProgress(){
resourcesLoaded++;
const percentage = resourcesLoaded / totalResources.length * 100;
document.documentElement.style.setProperty('--blazor-load-percentage', `${percentage}%`);
document.documentElement.style.setProperty('--blazor-load-percentage-text', `"${Math.floor(percentage)}%"`);
}

// Begin loading the .dll/.pdb/.wasm files, but don't block here. Let other loading processes run in parallel.
const dotnetWasmResourceName = 'dotnet.wasm';
const assembliesBeingLoaded = resourceLoader.loadResources(resources.assembly, filename => `_framework/${filename}`, 'assembly');
Expand All @@ -259,6 +267,8 @@ async function createEmscriptenModuleInstance(resourceLoader: WebAssemblyResourc
/* hash */ resourceLoader.bootConfig.resources.runtime[dotnetWasmResourceName],
/* type */ 'dotnetwasm'
);
const totalResources = assembliesBeingLoaded.concat(pdbsBeingLoaded, wasmBeingLoaded);
totalResources.forEach(loadingResource => loadingResource.response.then(_ => setProgress()));

const dotnetTimeZoneResourceName = 'dotnet.timezones.blat';
let timeZoneResource: LoadingResource | undefined;
Expand All @@ -269,6 +279,8 @@ async function createEmscriptenModuleInstance(resourceLoader: WebAssemblyResourc
resourceLoader.bootConfig.resources.runtime[dotnetTimeZoneResourceName],
'globalization'
);
totalResources.push(timeZoneResource);
timeZoneResource.response.then(_ => setProgress());
}

let icuDataResource: LoadingResource | undefined;
Expand All @@ -281,6 +293,8 @@ async function createEmscriptenModuleInstance(resourceLoader: WebAssemblyResourc
resourceLoader.bootConfig.resources.runtime[icuDataResourceName],
'globalization'
);
totalResources.push(icuDataResource);
icuDataResource.response.then(_ => setProgress());
Comment thread
cerasamson marked this conversation as resolved.
}

const createDotnetRuntime = await dotnetJsBeingLoaded;
Expand Down
35 changes: 34 additions & 1 deletion ...ates/Web.ProjectTemplates/content/ComponentsWebAssembly-CSharp/Client/wwwroot/css/app.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');
@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');

html, body {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
Expand Down Expand Up @@ -62,3 +62,36 @@ a, .btn-link {
.blazor-error-boundary::after {
content: "An error has occurred."
}

.loading-progress {
position: relative;
display: block;
width: 8rem;
height: 8rem;
margin: 20vh auto 1rem auto;
}

.loading-progress circle {
fill: none;
stroke: #e0e0e0;
stroke-width: 0.6rem;
transform-origin: 50% 50%;
transform: rotate(-90deg);
}

.loading-progress circle:last-child {
stroke: #1b6ec2;
stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
transition: stroke-dasharray 0.05s ease-in-out;
}

.loading-progress-text {
position: absolute;
text-align: center;
font-weight: bold;
inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}
Comment thread
cerasamson marked this conversation as resolved.

.loading-progress-text:after {
content: var(--blazor-load-percentage-text, "Loading");
}
8 changes: 7 additions & 1 deletion ...lates/Web.ProjectTemplates/content/ComponentsWebAssembly-CSharp/Client/wwwroot/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,13 @@
</head>

<body>
<div id="app">Loading...</div>
<div id="app">
<svg class="loading-progress">
<circle r="40%" cx="50%" cy="50%" />
<circle r="40%" cx="50%" cy="50%" />
</svg>
<div class="loading-progress-text"></div>
</div>

<div id="blazor-error-ui">
An unhandled error has occurred.
Expand Down
1 change: 1 addition & 0 deletions ...mplates/test/Templates.Blazor.WebAssembly.Tests/Templates.Blazor.WebAssembly.Tests.csproj
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
<TargetFramework>$(DefaultNetCoreTargetFramework)</TargetFramework>
<TestGroupName>ProjectTemplates.Blazor.WebAssembly.Tests</TestGroupName>
<DefineConstants>$(DefineConstants);XPLAT</DefineConstants>
<HelixTimeout>01:00:00</HelixTimeout>

<RunTemplateTests Condition="'$(RunTemplateTests)' == ''">true</RunTemplateTests>
<SkipTests Condition="'$(RunTemplateTests)' != 'true'">true</SkipTests>
Expand Down