Blazor WebAssembly loading progress decreases from 100% to 98%
- 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
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