dotnet / dotnet/aspnetcore

Blazor WebAssembly loading progress decreases from 100% to 98%

Open
#67,979 0 comments 1 reaction 0 assignees View on GitHub
area-blazor
Dominant language
C#
Stars
38.4k
Forks
10.9k
Avg merge
2d 10h
Merged PRs (30d)
281

Description

### Is there an existing issue for this?

- [x] I have searched the existing issues

### Describe the bug

I found #46549 and dotnet/runtime#93941, but this is a specific user-visible correctness problem.

During Blazor WebAssembly startup, the built-in
--blazor-load-percentage-text value reaches 100% and then decreases to 98%
before the application is ready.

A progress indicator must be monotonic and must never report 100% before
startup has actually completed.

The apparent cause is that ASP.NET Core calculates:

resourcesLoaded / totalResources * 100

while the .NET runtime builds totalResources dynamically as additional
resources are requested. For example:

50 / 50 = 100%
50 / 51 = 98%

This results in the visible progress changing from 100% back to 98%, which
looks broken and unprofessional to users.

Expected behavior:

- The total number of startup resources should be fixed before progress is reported.
- Progress must never decrease.
- 100% must only be reported after all required startup resources are loaded.
- Ideally, progress should represent downloaded bytes instead of only a resource count.

Please treat this as a correctness bug in the built-in Blazor loading indicator,
not only as a feature request.

### Expected Behavior

The built-in Blazor WebAssembly loading progress must be monotonic.

Once the progress reaches 100%, it must never decrease again. The value 100% should only be reported after all startup resources have been discovered and loaded.

### Steps To Reproduce



Blazor loading progress reproduction


.loading-progress-text::after {
content: var(--blazor-load-percentage-text, "Loading");
}




(() => {
let previous = -1;
const root = document.documentElement;

new MutationObserver(() => {
const current = parseFloat(
root.style.getPropertyValue(
"--blazor-load-percentage"
)
);

if (!Number.isFinite(current) || current === previous)
return;

console.log(`${previous}% -> ${current}%`);

if (previous >= 0 && current < previous) {
console.error(
`Progress decreased: ${previous}% -> ${current}%`
);
}

previous = current;
}).observe(root, {
attributes: true,
attributeFilter: ["style"]
});
})();

1. Create a standard Blazor WebAssembly application.
2. Replace the contents of wwwroot/index.html with the code above.
3. Publish and serve the application.
4. Open the browser developer console.
5. Reload the page.

The observer records all changes to Blazor's
--blazor-load-percentage CSS variable.

On the affected production application, the observed sequence included:

87.74% -> 100% -> 96.30% -> 99.38% -> 100%

The browser console reports "Progress decreased" when the value moves
backwards after already reaching 100%.

### Exceptions (if any)

_No response_

### .NET Version

NETCoreApp,Version=v10.0

### Anything else?

"name": ".NETCoreApp,Version=v10.0",

Contributor guide

Open the contributing guide

Research direction

Start by running the supplied reproduction in wwwroot/index.html and observing updates to the --blazor-load-percentage variable while loading _framework/blazor.webassembly.js. Trace how the built-in Blazor WebAssembly loading progress is produced and determine how startup resource discovery affects the reported total. Done means the indicator never decreases and does not report 100% before startup completes.

Written by the indexing model from the issue text.

Assessment

Tech stack
csharp, javascript
Domain
frontend, web-dev
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
48/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.