Skip to content

feat: Adjust progress bar behavior #971

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 5 commits into
base: main
Choose a base branch
from
Open

feat: Adjust progress bar behavior #971

Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
6ad8917
feat: Adjust progress bar behavior
MartinZikmund May 8, 2025
4003d4f
chore: Adjust progress
MartinZikmund May 9, 2025
a42a93a
chore: Adjust evaluation
MartinZikmund May 9, 2025
0a92eee
chore: Explain reasoning, address comment
MartinZikmund May 20, 2025
e415fdd
chore: Reference
MartinZikmund May 20, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 16 additions & 3 deletions src/Uno.Wasm.Bootstrap/ts/Uno/WebAssembly/Bootstrapper.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,8 @@ namespace Uno.WebAssembly.Bootstrap {
private _isUsingCommonJS: boolean;
private _currentBrowserIsChrome: boolean;
private _hasReferencedPdbs: boolean;
private _previousTotalResources: number;
private _currentTargetProgress: number;

static ENVIRONMENT_IS_WEB: boolean;
static ENVIRONMENT_IS_WORKER: boolean;
Expand Down Expand Up @@ -278,9 +280,20 @@ namespace Uno.WebAssembly.Bootstrap {
}

private reportDownloadResourceProgress(resourcesLoaded: number, totalResources: number) {

this.progress.max = totalResources;
(<any>this.progress).value = resourcesLoaded;
this.progress.max = 100;

// The totalResources value reported by .NET does not represent
// the actual total. To prevent progress bar from jumping
// setting the max progress to 100 instead and initially target 50
// When total number of resources increases, we always increase the target by half of the remainder to 100
// Usually the total grows several times, so ultimately the progress will appear as converging to completion.
if (this._previousTotalResources != totalResources)
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If the number of resources is less than 100, or that the number of total resources stops changing (because the number of total files is the final one), the progress bar will stop updating, right?

Copy link
Member Author

@MartinZikmund MartinZikmund Jun 6, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, it is not completely ideal, but neither is the current jumping back and forth... Like this it feels a bit more reflective of the actual loading progress. Alternatively we could have the progress bar/progress ring as indeterminate and maybe show the number of loaded resources as text. Not sure if that would be better? Quick mockup:

Screen.Recording.2025-06-06.145810.mp4

{
this._currentTargetProgress = this._currentTargetProgress + (100 - this._currentTargetProgress) / 2;
this._previousTotalResources = totalResources;
}

this.progress.value = Math.min(resourcesLoaded, this._currentTargetProgress);
}

private initProgress() {
Expand Down
Loading