CLS in navbar during page change

[BretHudson]

CleanShot.2022-02-20.at.08.27.19.mp4

The navbar is experiencing CLS on page change. The source of this FOUC seems to be that the light/dark mode toggle is not visible during the initial render of a new page.

There are a few approaches to fixing this. Let me know if you have any questions!

[thienjs]

yea. I started noticing the flash. I thought it was because of framer-motion. I would love your help on fixing this. Thank you so much.

[BretHudson]

Without looking at your code, I would assume there's something causing the toggle to only render after it is mounted. Due to this, when the toggle component is mounted, it adds it to the DOM and the navbar's flex recalculates to accommodate the newly placed element.

One simple solution would be to put a dummy icon/empty div in place of the toggle with the size of the icon when it hasn't yet been mounted, to "reserve" that space in the DOM before the actual toggle gets rendered.

I also just updated the title because I'm realizing it's not FOUC but CLS.

[thienjs]

Hey Bret, I tried a few things. This is what I came up with for now. Let me know what you think. Thank you so much for the help.