FlowFuse
Custom page-scoped css only applied on page after page is loaded
Current Behavior
https://discourse.nodered.org/t/custom-css-layout-loads-with-a-delay-in-dashboard-2-0/96657
I need my own custom layout, so I'm specifying each page's layout (with flexbox or grid) in a page-scoped CSS template node. My problem is that when I'm navigating from one page to another, the custom css layout loads only after the page is showing itself, which causes that user can see that it "glitches".
Expected Behavior
It would be reasonable if the specific CSS gets applied to the page immediately.
Steps To Reproduce
When navigating to page2 with the button, you may be able to see that for a moment, group1 and group2 are next to each other, and only after that moment will group2 be under group1. You might not see it with your own eyes, it depends on the performance of the computer. Running on my PC, I only saw it when recorder with super-slow motion. But it is clearly visible on a raspberry pi for example.
Environment
- Dashboard version: 1.23.0
- Node-RED version: 4.0.9
- Node.js version: 22.12.0
- npm version: 10.9.0
- Platform/OS: Windows / Linux (tried on both, this example flow was generated from Node-Red running on Windows 11)
- Browser: Google Chrome 135.0.7049.96 64-bit (Windows), Chromium (Linux)
Have you provided an initial effort estimate for this issue?
I am not a FlowFuse team member
The comment in the CSS is irrelevant, its there as a result of copy-paste and not paying attention