Feature: Fix flash of unstyled text

[louis-young]

PR for fixing the flash of unstyled text which is rather jarring and appears to cause a layout shift.

This pull request fixes the FOUT by relocating the font imports from the layout component into the _app file.

Changes

• Relocate font imports from the Layout component into the _app file.
• Relocate the CSS reset import from the Layout component into the _app file.

Notes

• I went for the simplest solution I could find here. Hopefully, we can use Next's font loaders when we upgrade to Next 13.
• I've also relocated the CSS reset for consistency.
• I don't use Next very often so if we have any Next experts then please feel free to advise whether or not this is the correct place to import such assets.

[what-the-diff]

• Moved the typeface imports from Layout.js to _app.tsx
• Removed minireset import in Layout component as it is already imported globally

[netlify]

✅ Deploy Preview for reactiflux ready!

Name	Link
🔨 Latest commit	fca7515
🔍 Latest deploy log	https://app.netlify.com/sites/reactiflux/deploys/636189344c261300071206d4
😎 Deploy Preview	https://deploy-preview-240--reactiflux.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[nickserv]

This is the recommended way to add a global stylesheet.

[nickserv]

The flash still seems to happen on the initial page load. However it's still way less jarring without the flash in between page transitions, so you can merge this if you want. #242 could fix our remaining issues anyway.

[louis-young]

This is the recommended way to add a global stylesheet.

Thanks. I’ll call it an educated guess 😄

[louis-young]

The flash still seems to happen on the initial page load. However it's still way less jarring without the flash in between page transitions, so you can merge this if you want. #242 could fix our remaining issues anyway.

Yeah, there will be a short FOUT on initial load but it resolves the jarring flash on every navigation like you say. As it’s such a trivial change, I think we should merge this and look at using Next’s font loaders once we’ve upgraded 👍