Default WebAssembly loading progress indicator doesn't apply in Blazor Web template

[SteveSandersonMS]

In .NET 7 we added a built-in loading progress indicator for WebAssembly apps.

This continues to work in .NET 8 if you have a WebAssembly standalone project. However if you are using the new Blazor Web template, any WebAssembly components are added via @rendermode, and this will not cause the loading progress indicator to show up, because most of the time you wouldn't want to. You can have any number of small islands of WebAssembly-based UI anywhere, and it will normally be prerendered. And:

• We don't want to show multiple loading indicators
• We don't want to discard the prerendered content while the WebAssembly runtime is loading

This issue is just to track that we probably need to update some docs/guidance to avoid implying that people should or can always have a WebAssembly loading progress indicator. Also we might consider having some special new component that does render a loading progress indicator within the new architecture for people who really don't want to prerender their WebAssembly content.

[SteveSandersonMS]

Out of scope for .NET 8, but one possible design idea for the future is:

• When a WebAssembly component is not prerendered, we could always emit some tiny snippet of markup like <blazor-webassembly-placeholder></blazor-webassembly-placeholder>. By default that would produce no visible UI, but people could choose to use CSS to display some kind of "loading" indicator matching that tag name. It might even be sufficient for showing a working progress indicator using our existing CSS variables.
• When a WebAssembly component is prerendered, we could display it normally, but also, until it actually becomes interactive we could intercept any click or focus events on it and block them, causing it to grey out and overlay a subtle loading indicator.

However if the "auto" mode becomes really mainstream then maybe this would not be a situation in the first place.

[danroth27]

Another use case is upgrading an existing ASP.NET Core hosted Blazor WebAssembly app to .NET 8 and switching from the static index.razor to server-side rendered component (Host.razor). Initially I find it's natural to disable prerendering of the App component when upgrading because many Blazor WebAssembly components aren't set up properly for prerendering (like the default FetchData component, which depends on an HttpClient service). But without prerendering you probably still want the loading indicator.

You can disable prerendering as part of specifying the render mode for the App component, but then you don't have a way to render the loading progress indicator and have it later gets replaced. I can sort of work around this by using the old pattern of registering the App component as a root component with a CSS selector in Program.cs. As long as the HeadOutlet is still setup to use the WebAssembly render mode then blazor.web.js will still load the client app and setup the App component. It feels a bit hacky, but it seems to work.

[danroth27]

Reopening as this can be an issue for users migrating Blazor WebAssembly apps to the Blazor Web App model.