Documentation for progress indicator with global InteractiveWebAssembly prerender=false is missing

[divvjson]

We have a Blazor Web App with global InteractiveWebAssembly with no prerender. We want to implement our own custom loading progress indicator.

Docs here

The documenation for a custom loading progress indicator does not demonstrate an example where the Blazor project is a Blazor Web App with global @rendermode="new InteractiveWebAssemblyRenderMode(prerender: false)".

It seems to assume either:

Blazor Web App with per page/component interactivity. Here it demonstrates that the LoadingProgress should be added to each page that adopts @rendermode InteractiveWebAssembly. This approach is superflous since we are using global InteractiveWebAssembly.

or

Blazor WebAssembly Standalone which is not applicable for our project.

How can we implement a custom loading progress indicator for global InteractiveWebAssembly with no prerender?

[javiercn]

@divvjson thanks for contacting us.

Global or per page I don't think it matters here. On your Routes component within your app you can have the loading indicator render the placeholder during prerendering and then render the actual Routes component when running inside webassembly.

You need to render the loading content statically and remove it from the DOM when the app becomes interactive.

[javiercn]

@guardrex can you take a look at what's missing here and fill it in?

[guardrex]

@javiercn ... You probably should look to see if the proposed article coverage is headed in the right direction ...

dotnet/AspNetCore.Docs#35111 (comment)

[guardrex]

@javiercn ... Thus far for the global Interactive WebAssembly without prerendering case, I only worked up an approach that works after the runtime starts for long-running work during component initialization using a loading component, which I'm adding separately to the Cancelable background work section of the Lifecycle article.

For ..........

render the loading content statically and remove it from the DOM when the app becomes interactive

Are you hinting at using a JS initializer-based approach (or Blazor.start()-based approach)?

If so, I'll give that a shot and see how it goes.

... and btw ...

Global or per page I don't think it matters here.

It seems like there is a delta between them: For global Interactive WebAssembly with prerendering, the only way I could get our current per-component Interactive WebAssembly guidance to work is if I make the following change in the loading indicator component ...

- @if (!OperatingSystem.IsBrowser())
+ @if (!RendererInfo.IsInteractive)

... and then I can wrap @Body in the layout with the loading indicator component. The loading indicator displays during prerendering and is replaced when the app becomes interactive on the client. I'm adding this in a new section to the Startup article on the PR, separately from addressing @divvjson's ask on what to do for the without prerendering case.

[guardrex]

🦆

This looks good using a JS initializer approach ...

• Add a JS initializer (the name "BlazorSample" in the following example is the assembly name).
• The wwwroot folder here is the one in the BWA server-side project, not the .Client project.

wwwroot/BlazorSample.lib.module.js:

export function beforeWebStart(options) {
  var progress = document.createElement("progress");
  progress.id = 'progressBar';
  progress.ariaLabel = 'Blazor loading…';
  progress.style = 'position:absolute;top:50%;left:50%;margin-right:-50%;transform:translate(-50%,-50%);';
  document.body.appendChild(progress);
}

export function afterWebAssemblyStarted(blazor) {
  var progress = document.getElementById('progressBar');
  progress.remove();
}

That one isn't designed to track progress, but it would get devs going in the right direction with a progress indicator.

AND

It requires the workaround in the App component in .NET 8 and .NET 9 per #54049 ...

<script src="_framework/blazor.web.js" autostart="false"></script>
<script>
    Blazor.start({
        webAssembly: {}
    });
</script>

[guardrex]

🦖 NOTE TO SELF

Add the example to the list in the JS initializers coverage

[guardrex]

🦖 NOTE TO SELF

Add the example to the list in the JS initializers coverage

[divvjson]

@guardrex I got it working. Though there seems to be a small time window between afterWebAssemblyStarted and actually getting my app rendered and ready on the screen.

[guardrex]

🎉 ... Cool.

WRT the delay, you'd have to ask Javier about it. I can only guess that there's still a slight delay that you won't be able to overcome using afterWebAssemblyStarted to remove the loading indicator.

Instead of using afterWebAssemblyStarted, I thought about chaining to Blazor.start(), but that won't work (I tried it) because the runtime starts but the page isn't rendered yet. That's not a good hook.

The only other thing that I can think of besides that would be to use the MutationObserver pattern to detect something on the page that definitely indicates a fully rendered page ... but I'm not sure exactly what to watch for.

[guardrex]

I'm going to experiment with using JS interop that runs in OnAfterRenderAsync in the main layout. That for sure would be after rendering is complete. I'll report back shortly.

[guardrex]

It works. Try this and see if the delay goes away ...

Remove afterWebAssemblyStarted from the JS initializer.

Add a <script> to the App component under Blazor's <script> tag:

<script>
  function removeIndicator() {
    var progress = document.getElementById('progressBar');
    progress.remove();
  }
</script>

Inject IJSRuntime into MainLayout.razor ...

@inject IJSRuntime JS

At the bottom of the MainLayout component, add the OnAfterRenderAsync lifecycle method and call the FN ...

@code {
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await JS.InvokeVoidAsync("removeIndicator");
        }
    }
}