NextJS - Refresh glitch with components in the TetrislyProvider

[elvisdcgoncalves]

Hi,

I have a NextJS proof of concept starter project.

I have added Tetrisly to this project, on 2 separate pages.

On each page i simply display Tetrisly components H1 and Button and they display just fine, but if i hit the refresh button of the browser (Chrome) you can see that the components are rendered unstyled for half a second and then the Tetrisly styles are applied.

If you then navigate between the 2 pages using the buttons on the page, you do not see this visual glitch because of how NextJS loads a page using the Link component.

On the second page (/test), i have also added MuiButtons and they render fine on a browser refresh, but the Tetrisly components are rendered unstyled first and the styles once the refresh of the page is completed.

Here is a link to my public github repo to reproduce this issue: https://github.com/elvisdcgoncalves/poc-tetrisly

Thank you in advance for your help!