Improve Default Blazor WebAssembly Loading Experience by cerasamson · Pull Request #42548 · dotnet/aspnetcore

cerasamson · 2022-07-01T23:25:01Z

Improve Default Blazor WebAssembly Loading Experience

This adds an enhanced loading element to the Blazor WebAssembly project template.

Description

A loading element is added to the Blazor WebAssembly project template and will load upon startup of the app. Progress is indicated by a percentage and a progress ring. Progression is based on the number of resources loaded compared to the number of total resources.

Loading Animation:

Fixes #37199

Customer Impact

Since this PR brings updates to a project template, we would like to get these changes to customers as soon as possible in order to adapt to any feedback that they have. This will also minimize the need for additional template changes in the RC builds.

Regression?

Yes
No

Risk

High
Medium
Low
The change is purely additive without impact to any existing functionality. It's also scoped to a single page in the template.

Verification

Manual (required)
Automated

Packaging changes reviewed?

Yes
No
N/A

…mson/aspnetcore into t-samsoncera/wasm-loading

TanayParikh

Looking great so far! Can you please add a screen recording / gif of what the loading animation looks like?

…mson/aspnetcore into t-samsoncera/wasm-loading

Co-authored-by: Tanay Parikh <TanayParikh@users.noreply.github.com>

ghost · 2022-07-14T21:14:32Z

Hi @cerasamson. Please make sure you've updated the PR description to use the Shiproom Template. Also, make sure this PR is not marked as a draft and is ready-to-merge.

To learn more about how to prepare a servicing PR click here.

dougbu · 2022-07-15T22:05:16Z

Please rebase your changes on the new target branch. As-is, you're bringing way too much in from 'main'.

TanayParikh · 2022-07-16T03:23:37Z

@dotnet/aspnet-build can this please be merged, it's servicing-approved.

TanayParikh · 2022-07-19T16:41:34Z

/backport to main

github-actions · 2022-07-19T16:41:52Z

Started backporting to main: https://github.com/dotnet/aspnetcore/actions/runs/2699196368

github-actions · 2022-07-19T16:42:35Z

@TanayParikh backporting to main failed, the patch most likely resulted in conflicts:

$ git am --3way --ignore-whitespace --keep-non-patch changes.patch

Applying: Added loader SVG and CSS styling
Applying: Add WebAssemblyProgressService, WebAssemblyProgressReporter
Applying: Add styling for setProgress, fix resourcesTotal
Applying: Implement singleton pattern, fix CSS styling
Applying: Convert % text to SVG
Applying: Add WebAssemblyProgressService as IBlazor global export
Applying: Modify CSS classes, added TSDoc to public methods
Applying: Modify CSS element names
Applying: Update src/Components/Web.JS/src/Boot.WebAssembly.ts
Applying: Update src/Components/Web.JS/src/Platform/WebAssemblyProgressReporter.ts
Applying: Check for additional resources; percentage styling
Applying: Update app.css
Applying: Create global SetProgress, pass in ProgressService
Applying: Vertically center loading circle
Applying: Update Boot.WebAssembly.ts
Applying: Update src/Components/Web.JS/src/Platform/WebAssemblyResourceLoader.ts
Applying: Fix possible undefined wasmLoadingSetProgress
Applying: Remove setProgressFunction from GlobalExports
Applying: Update blazor.server.js
warning: Cannot merge binary files: src/Components/Web.JS/dist/Release/blazor.server.js (HEAD vs. Update blazor.server.js)
Using index info to reconstruct a base tree...
M	src/Components/Web.JS/dist/Release/blazor.server.js
Falling back to patching base and 3-way merge...
Auto-merging src/Components/Web.JS/dist/Release/blazor.server.js
CONFLICT (content): Merge conflict in src/Components/Web.JS/dist/Release/blazor.server.js
error: Failed to merge in the changes.
hint: Use 'git am --show-current-patch=diff' to see the failed patch
Patch failed at 0019 Update blazor.server.js
When you have resolved this problem, run "git am --continue".
If you prefer to skip this patch, run "git am --skip" instead.
To restore the original branch and stop patching, run "git am --abort".
Error: The process '/usr/bin/git' failed with exit code 128

Please backport manually!

* Added loader SVG and CSS styling * Add WebAssemblyProgressService, WebAssemblyProgressReporter * Add styling for setProgress, fix resourcesTotal * Implement singleton pattern, fix CSS styling * Convert % text to SVG * Add WebAssemblyProgressService as IBlazor global export * Modify CSS classes, added TSDoc to public methods * Modify CSS element names * Update src/Components/Web.JS/src/Boot.WebAssembly.ts * Co-authored-by: Tanay Parikh <TanayParikh@users.noreply.github.com> * Update src/Components/Web.JS/src/Platform/WebAssemblyProgressReporter.ts * Co-authored-by: Tanay Parikh <TanayParikh@users.noreply.github.com> * Check for additional resources; percentage styling * Update app.css * Create global SetProgress, pass in ProgressService * Vertically center loading circle * Update Boot.WebAssembly.ts * Update src/Components/Web.JS/src/Platform/WebAssemblyResourceLoader.ts * Co-authored-by: Tanay Parikh <TanayParikh@users.noreply.github.com> * Fix possible undefined wasmLoadingSetProgress * Remove setProgressFunction from GlobalExports * Update blazor.server.js * Update src/Components/Web.JS/src/Platform/WebAssemblyProgressReporter.ts * Co-authored-by: Tanay Parikh <TanayParikh@users.noreply.github.com> * Update src/Components/Web.JS/src/Platform/Mono/MonoPlatform.ts * Co-authored-by: Tanay Parikh <TanayParikh@users.noreply.github.com> * Update src/Components/Web.JS/src/Platform/WebAssemblyStartOptions.ts * Co-authored-by: Tanay Parikh <TanayParikh@users.noreply.github.com> * Remove progress ring transition duration * Update src/Components/Web.JS/src/Platform/WebAssemblyStartOptions.ts * (WIP) Bring all .ts changes to MonoPlatform.ts * Remove reporter/service classes, update loading styling * Center percentage text * Update app.css * Add additional checks for element types * Prevent exception by changing to div id = "app" * Update src/Components/Web.JS/src/Platform/Mono/MonoPlatform.ts * Co-authored-by: Tanay Parikh <TanayParikh@users.noreply.github.com> * WIP remove CSS id * Concat promises for setProgress function * Update src/Components/Web.JS/src/Platform/Mono/MonoPlatform.ts * Co-authored-by: Tanay Parikh <TanayParikh@users.noreply.github.com> * Update src/Components/Web.JS/src/Platform/Mono/MonoPlatform.ts * Co-authored-by: Tanay Parikh <TanayParikh@users.noreply.github.com> * CSS updates * Update src/ProjectTemplates/Web.ProjectTemplates/content/ComponentsWebAssembly-CSharp/Client/wwwroot/css/app.css * Co-authored-by: Steve Sanderson <SteveSandersonMS@users.noreply.github.com> * Update src/Components/Web.JS/src/Platform/Mono/MonoPlatform.ts * Co-authored-by: Tanay Parikh <TanayParikh@users.noreply.github.com> * Update src/ProjectTemplates/Web.ProjectTemplates/content/ComponentsWebAssembly-CSharp/Client/wwwroot/css/app.css * Co-authored-by: Steve Sanderson <SteveSandersonMS@users.noreply.github.com> * Add default "Loading" test * Update Templates.Blazor.WebAssembly.Tests.csproj * Update Templates.Blazor.WebAssembly.Tests.csproj Co-authored-by: Tanay Parikh <TanayParikh@users.noreply.github.com> Co-authored-by: Steve Sanderson <SteveSandersonMS@users.noreply.github.com>

* Added loader SVG and CSS styling * Add WebAssemblyProgressService, WebAssemblyProgressReporter * Add styling for setProgress, fix resourcesTotal * Implement singleton pattern, fix CSS styling * Convert % text to SVG * Add WebAssemblyProgressService as IBlazor global export * Modify CSS classes, added TSDoc to public methods * Modify CSS element names * Update src/Components/Web.JS/src/Boot.WebAssembly.ts * Co-authored-by: Tanay Parikh <TanayParikh@users.noreply.github.com> * Update src/Components/Web.JS/src/Platform/WebAssemblyProgressReporter.ts * Co-authored-by: Tanay Parikh <TanayParikh@users.noreply.github.com> * Check for additional resources; percentage styling * Update app.css * Create global SetProgress, pass in ProgressService * Vertically center loading circle * Update Boot.WebAssembly.ts * Update src/Components/Web.JS/src/Platform/WebAssemblyResourceLoader.ts * Co-authored-by: Tanay Parikh <TanayParikh@users.noreply.github.com> * Fix possible undefined wasmLoadingSetProgress * Remove setProgressFunction from GlobalExports * Update blazor.server.js * Update src/Components/Web.JS/src/Platform/WebAssemblyProgressReporter.ts * Co-authored-by: Tanay Parikh <TanayParikh@users.noreply.github.com> * Update src/Components/Web.JS/src/Platform/Mono/MonoPlatform.ts * Co-authored-by: Tanay Parikh <TanayParikh@users.noreply.github.com> * Update src/Components/Web.JS/src/Platform/WebAssemblyStartOptions.ts * Co-authored-by: Tanay Parikh <TanayParikh@users.noreply.github.com> * Remove progress ring transition duration * Update src/Components/Web.JS/src/Platform/WebAssemblyStartOptions.ts * (WIP) Bring all .ts changes to MonoPlatform.ts * Remove reporter/service classes, update loading styling * Center percentage text * Update app.css * Add additional checks for element types * Prevent exception by changing to div id = "app" * Update src/Components/Web.JS/src/Platform/Mono/MonoPlatform.ts * Co-authored-by: Tanay Parikh <TanayParikh@users.noreply.github.com> * WIP remove CSS id * Concat promises for setProgress function * Update src/Components/Web.JS/src/Platform/Mono/MonoPlatform.ts * Co-authored-by: Tanay Parikh <TanayParikh@users.noreply.github.com> * Update src/Components/Web.JS/src/Platform/Mono/MonoPlatform.ts * Co-authored-by: Tanay Parikh <TanayParikh@users.noreply.github.com> * CSS updates * Update src/ProjectTemplates/Web.ProjectTemplates/content/ComponentsWebAssembly-CSharp/Client/wwwroot/css/app.css * Co-authored-by: Steve Sanderson <SteveSandersonMS@users.noreply.github.com> * Update src/Components/Web.JS/src/Platform/Mono/MonoPlatform.ts * Co-authored-by: Tanay Parikh <TanayParikh@users.noreply.github.com> * Update src/ProjectTemplates/Web.ProjectTemplates/content/ComponentsWebAssembly-CSharp/Client/wwwroot/css/app.css * Co-authored-by: Steve Sanderson <SteveSandersonMS@users.noreply.github.com> * Add default "Loading" test * Update Templates.Blazor.WebAssembly.Tests.csproj * Update Templates.Blazor.WebAssembly.Tests.csproj Co-authored-by: Tanay Parikh <TanayParikh@users.noreply.github.com> Co-authored-by: Steve Sanderson <SteveSandersonMS@users.noreply.github.com> Co-authored-by: Tanay Parikh <TanayParikh@users.noreply.github.com> Co-authored-by: Steve Sanderson <SteveSandersonMS@users.noreply.github.com>

msschl · 2022-08-01T09:22:55Z

Great work. 🎉 I really like that design.

ghost · 2022-08-01T09:23:00Z

Hi @msschl. It looks like you just commented on a closed PR. The team will most probably miss it. If you'd like to bring something important up to their attention, consider filing a new issue and add enough details to build context.

cerasamson and others added 9 commits June 28, 2022 10:20

Added loader SVG and CSS styling

6114f13

Merge branch 'main' into t-samsoncera/wasm-loading

6348f06

Add WebAssemblyProgressService, WebAssemblyProgressReporter

2cedbd0

Add styling for setProgress, fix resourcesTotal

22577d0

Merge branch 'dotnet:main' into t-samsoncera/wasm-loading

7132a87

Implement singleton pattern, fix CSS styling

f495715

Merge branch 't-samsoncera/wasm-loading' of https://github.com/cerasa…

3866f4b

…mson/aspnetcore into t-samsoncera/wasm-loading

Merge branch 'dotnet:main' into t-samsoncera/wasm-loading

83c2a0b

Convert % text to SVG

f52d023

TanayParikh reviewed Jul 1, 2022

View reviewed changes

Comment thread ...mplates/Web.ProjectTemplates/content/ComponentsWebAssembly-CSharp/Client/wwwroot/css/app.css Outdated

cerasamson and others added 3 commits July 4, 2022 23:27

Add WebAssemblyProgressService as IBlazor global export

dc1ef85

Merge branch 'dotnet:main' into t-samsoncera/wasm-loading

fba966d

Merge branch 't-samsoncera/wasm-loading' of https://github.com/cerasa…

75e3d0d

…mson/aspnetcore into t-samsoncera/wasm-loading

TanayParikh reviewed Jul 5, 2022

View reviewed changes

Pilchie added the area-blazor Includes: Blazor, Razor Components label Jul 5, 2022

Modify CSS classes, added TSDoc to public methods

1e4b3fb

TanayParikh added this to the 7.0-preview7 milestone Jul 5, 2022

cerasamson and others added 2 commits July 6, 2022 12:11

Merge branch 'dotnet:main' into t-samsoncera/wasm-loading

f6b3282

Modify CSS element names

ee3cf88

cerasamson marked this pull request as ready for review July 6, 2022 23:33

cerasamson requested a review from a team as a code owner July 6, 2022 23:33

TanayParikh reviewed Jul 6, 2022

View reviewed changes

cerasamson and others added 4 commits July 7, 2022 10:17

Update src/Components/Web.JS/src/Boot.WebAssembly.ts

0ee196f

Co-authored-by: Tanay Parikh <TanayParikh@users.noreply.github.com>

Update src/Components/Web.JS/src/Platform/WebAssemblyProgressReporter.ts

340a8c6

Co-authored-by: Tanay Parikh <TanayParikh@users.noreply.github.com>

Check for additional resources; percentage styling

804e545

Update app.css

835dc9a

TanayParikh requested a review from a team July 7, 2022 20:32

cerasamson added 2 commits July 7, 2022 16:07

Create global SetProgress, pass in ProgressService

f2a2f60

Vertically center loading circle

c9d2a83

mkArtakMSFT added the Servicing-consider Shiproom approval is required for the issue label Jul 14, 2022

mkArtakMSFT added Servicing-approved Shiproom has approved the issue and removed Servicing-consider Shiproom approval is required for the issue labels Jul 14, 2022

cerasamson added 2 commits July 14, 2022 16:02

Add default "Loading" test

a6c51d0

Update Templates.Blazor.WebAssembly.Tests.csproj

80a0577

cerasamson requested review from a team, BrennanConroy, JamesNK, Pilchie, Tratcher, dougbu, halter73 and wtgodbe as code owners July 15, 2022 20:58

cerasamson force-pushed the t-samsoncera/wasm-loading branch from 6dd6536 to 80a0577 Compare July 15, 2022 22:06

Update Templates.Blazor.WebAssembly.Tests.csproj

34da8e4

dougbu merged commit 301829c into dotnet:release/7.0-preview7 Jul 16, 2022

SteveSandersonMS mentioned this pull request Jul 18, 2022

[wip][blazor] Delegate loading of assets to runtime #42770

Closed

cerasamson mentioned this pull request Jul 19, 2022

Forward port "Improve Default Blazor WebAssembly Loading Experience" #42813

Merged

This was referenced Jul 21, 2022

Blazor .NET 7 tracking issue dotnet/AspNetCore.Docs#26364

Closed

Blazor template and prerendering updates dotnet/AspNetCore.Docs#26519

Closed

Conversation

cerasamson commented Jul 1, 2022 • edited by mkArtakMSFT Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Improve Default Blazor WebAssembly Loading Experience

Description

Customer Impact

Regression?

Risk

Verification

Packaging changes reviewed?

Uh oh!

TanayParikh left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

ghost commented Jul 14, 2022

Uh oh!

dougbu commented Jul 15, 2022

Uh oh!

TanayParikh commented Jul 16, 2022

Uh oh!

TanayParikh commented Jul 19, 2022

Uh oh!

github-actions Bot commented Jul 19, 2022

Uh oh!

github-actions Bot commented Jul 19, 2022

Uh oh!

msschl commented Aug 1, 2022

Uh oh!

ghost commented Aug 1, 2022

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

9 participants

cerasamson commented Jul 1, 2022 •

edited by mkArtakMSFT

Loading