Fix temp styles not applying to navbars in header files #892
Conversation
src/Page.js
Outdated
| .then(result => this.insertHeaderFile(result)) | ||
| .then(result => this.insertTemporaryStyles(result)) |
There was a problem hiding this comment.
Should put this after insertFooterFile? So that the header and footer are logically grouped together.
There was a problem hiding this comment.
Good suggestion, since there is a chance that navbars or dropdown menus are placed in a footer by the author.
|
A more permanent solution can be explored with pre-rendering Vue components in the future. But for now this minor fix helps alleviate the FOUC issue |
|
I was wondering why the navbar was causing a ugly FOUC when it was minimized a few versions ago :-p |
Might also want to revisit the original plan of displaying a spinner until the content + vue components have finished loading. |
@marvinchin tried that. We eventually decided against it because it gave a 'slow site' feeling to the user. |
Previously, a fix was implemented for reducing FOUC by applying temporary styles for <navbar> and <dropdown>. A later commit broke this fix by moving the header and footer files to a layout, which caused the contents of those files to be missed by the temporary style fix. This commit fixes this by inserting the temporary styles after the header and footer files are inserted in the page, such that the temporary styles are applied correctly to the relevant tags.
Chng-Zhi-Xuan
changed the title
What is the purpose of this pull request? (put "X" next to an item, remove the rest)
• [x] Bug fix
Alleviates #889
What is the rationale for this request?
Previously, #664 added temporary styles to
<navbar>to prevent them from displaying as a list while Vue loads. However, after the layout update, theinsertTemporaryStyleswas called beforeinsertHeaderFile, which kept the temporary styles from being applied to<navbar>in the header file.What changes did you make? (Give an overview)
This PR swaps the order of the two calls, such that
<navbar>in the header file will also get the temporary styles applied.Provide some example code that this change will affect:
Is there anything you'd like reviewers to focus on?
Testing instructions:
netlify preview
Proposed commit message: (wrap lines at 72 characters)
Previously, a fix was implemented for reducing FOUC by applying
temporary styles for and . A later commit broke this
fix by moving the header and footer files to a layout, which caused
the contents of those files to be missed by the temporary style fix.
This commit fixes this by inserting the temporary styles after
the header and footer files are inserted in the page, such that
the temporary styles are applied correctly to the relevant tags.