Custom CSS layout loads with a delay in Dashboard 2.0

Dashboard
1

Hello

I'm using Node-Red Dashboard 2.0. 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 looks ugly, because the user can see that it "glitches", because there is like a 0.1-0.3 seconds when the layout is messed up, because it isn't loaded yet.

I included a gif where I recorded it in slow-motion.

I thought of hiding the whole page until the css is loaded, but i don't know what browser event to look for specifically.

Thanks for any help!
491481064_9683309861783967_7444529916494539815_n-ezgif.com-video-to-gif-converter

2

Hmmm. We might need to look at somehow prioritising CSS mode templates.

Would you be kind enough to produce a small demo flow and raise an issue (and cross link back here)

3

Does it help if you use a site wide css template?

4

Well, yes, that fixes the issue! For now, I will do this (and specifying the page with a custom CSS selector for that page).
Thank you :slight_smile:

5

Thank you, I raised an issue.
Although I'm not sure that this is something needs to be fixed, because this might be just how CSS works. However, I provided an example flow so you can try it out and see if this is something to be addressed.
For now, I'm going to use site-wide CSS template for this, as Colin suggested.