Changing pages flashes white

[micchickenburger]

Describe the bug
When changing pages, there are one or more rerenders occurring, which is a bit jarring. I think this is because the page renders before the CSS is loaded over the network.

To Reproduce
Steps to reproduce the behavior:

1. Switch page
2. Observe

Expected behavior
A less jarring repaint/rerender

Screenshots
https://github.com/user-attachments/assets/159301c3-d548-4f01-9219-fad1538a07c4

Note the gap in time between page download and CSS download.

Software:

• HortusFox version: 4.9
• PHP Version: 8.3.0
• MySQL version (if related to the problem)
• Docker version if used in a docker environment
• Changes to your docker-compose file if altered

Desktop (please complete the following information):

• OS: macOS Sequoia 15.4.1
• Browser: safari
• Version: 18.4

Additional context
Since this is a Vue app maybe doing client side routing could resolve this issue while making page changes seem instant. Though I understand that would be a large refactor.

Thanks for all the work you've done on HortusFox! I'm a big fan!

[danielbrendel]

Hi, thanks for reporting this issue. This happens because the CSS is loaded from within the app.js file that is referenced fairly at the bottom of the document, so the base structure is already there, but not styled. I'll evaluate how this can be improved.