Describe the bug
On page load, various styles aren't applied immediately, causing disruptive FOUC. Examples include:
The page title, which shows unstyled text for a brief moment (this is hardly noticeable in comparison to the other examples)
The icon next to the page title, which temporarily display's itself above the title text rather than inline with it
The add files icon of the file picker, which temporarily shows with a width of 100%
The icons in the footer take a moment to show up
Steps to reproduce
Steps to reproduce the behavior:
Reload the page
See FOUC
Expected behavior
Either a loading screen should be shown to cover the partially loaded page or the icons should be shown with their final layout positions/sizes when the page first loads.
Screenshots
Other
For the text, we should specific a default font that is much closer to the desired font so that any font changes are less noticeable. In addition, we could make the text transparent until it is ready to display.
For the icons, this is likely an issue with font-awesome styles loading later than the page content. This issue is mentioned in the FontAwesome docs.
Helpful info
Describe the bug On page load, various styles aren't applied immediately, causing disruptive FOUC. Examples include:
Steps to reproduce Steps to reproduce the behavior:
Expected behavior Either a loading screen should be shown to cover the partially loaded page or the icons should be shown with their final layout positions/sizes when the page first loads.
Screenshots
Other For the text, we should specific a default font that is much closer to the desired font so that any font changes are less noticeable. In addition, we could make the text transparent until it is ready to display.
For the icons, this is likely an issue with font-awesome styles loading later than the page content. This issue is mentioned in the FontAwesome docs.