reactiflux / reactiflux.com

Reactiflux Website
https://www.reactiflux.com/
MIT License
255 stars 53 forks source link

Feature: Fix flash of unstyled text #240

Closed louis-young closed 2 years ago

louis-young commented 2 years ago

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

Notes

what-the-diff[bot] commented 2 years ago
netlify[bot] commented 2 years ago

Deploy Preview for reactiflux ready!

Name Link
Latest commit fca75157308f68f334a3b50ed82ed524b8dcdb74
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...

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 commented 2 years ago

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 commented 2 years ago

This is the recommended way to add a global stylesheet.

Thanks. Iโ€™ll call it an educated guess ๐Ÿ˜„

louis-young commented 2 years ago

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 ๐Ÿ‘