bug: UI flickering when resizing / applying CSS styles

[mman]

When the Widget like Tanks overview or Energy overview loads, it displays all its nested elements.

Then it somehow sizes them and determines whether some of these are overflowing from the box, and if yes it displays the bottom left/right pagination controls. When the CSS style is loaded and applied, some of the children may change size, and the process needs to repeat. This can cause a lot of flickering on the slow MFD where initial display without CSS persists for several seconds before the CSS is applied.

The bug can be easily reproduced by resizing the modern browser window to the size where items start to disappear from the list and pagination controls start to appear.

Screen.Recording.2024-09-12.at.11.14.20.mov

[mman]

When you tap on Environment and Tanks the CSS applies straight ahead without blinking.

When you tap on Batteries, the page loads and then applies new style.

When you get back from any detailed page, main page loads, displays, and new styles get applied.

Investigate. It's less then good...