Loading screen misplaced on multiple canvases

Bugs
,
1

Hi everyone,

i have noticed a possible bug when you have multiple canvases and you try to show the loading screen: there is a single loader and it is misplaced on the top left corner of the page. I thought that would be multiple loading screens on each canvas showing/hiding simultaneously.

I can’t reproduce it on playground due to the single-canvas nature of playground but i’m able to reproduce it on a codesandbox:

The above sandbox is the exact copy of the example from documentation Using Multiple Canvases > Demo with the only adding of engine.displayLoadingUI method.

Hands on:

The issue could be due to the fact that DefaultLoadingScreen class relies on the fake canvas this._renderingCanvas used for the Engine’s initialization. A possibile solution could be to retrieve all canvases associated to the current engine and show/hide the loading screen on each of them.

I have created a pull request that (attempts to) solve the issue:

Tests:

  • there are no unit tests because NullEngine doesn’t show the loading screen;
  • i have created two visualization tests (show/hide the loading screen) testing also _loadingText and _loadingDivBackgroundColor properties.

Additional considerations:

  • i have used the onResizeObservable over resize listener because a dynamic layout updates the properties of the canvases and so the the loading divs have to be recalculated consequently (you can see the flickering effect also in the above repro sample);
  • i have preferred a single listener over multiple listeners;
  • i have preferred use a map also when there is a single canvas (no multiple views) to ensure a consistent behaviour;
  • i thought to the possibility to show/hide a loading screen on a specific canvas (for instance by canvas id), but there shouldn’t be any need because an async operation like asset’s loading or an heavy work, both of them would block the main thread and consequently all canvases.

This is my first pull request, and I’m aware it touches an important part of the project. I’ve tried to approach the issue carefully, but I’m open to any suggestions or improvements. If there are better approaches or changes needed, I’m happy to make adjustments.

2 Likes
2

Man! this is great! Thanks a ton for that contribution! I added a small comment but else we are good to go!

1 Like
3

Wow! I can’t believe it. I just fixed it.

1 Like
4

During my tests of the official latest release 7.46.0, I found another issue related to the loading screen. When the scrollbar is present and already scrolled, the loading screen (whether single or multiple) is misplaced because it doesn’t account for the scroll offset.

This is not a regression, you can verify it using the following repro sample with previous version 7.45.0:

The above sandbox is the exact copy of the example from documentation Starter HTML Template with modifications to the overflow attribute, the addition of the engine.displayLoadingUI method and the inclusion of a big container to reproduce the scrollbar behaviour.

I have created a pull request to add the missing scroll offsets:

Again, happy to consider better approaches or changes needed!

2 Likes
5

you rock!

1 Like