Utilizing Next.js in conjunction with Material UI, the Material UI CSS does not load correctly upon initial page load, resulting in a display error similar to this image: https://i.sstatic.net/7wpxM.png
The correct styling is achieved after a page transition like so: https://i.sstatic.net/HdIzJ.png
(There are many other instances where elements such as fixed position headers are out of place.)
However, transitioning from one page to another or triggering a setState command resolves the issue and applies the CSS properly. This discrepancy may be due to a class name mismatch between server and client despite implementing _app and _document from this link. The problem still persists.
Therefore, my only recourse is to include a Twitter or Instagram-like loading screen on the first visit, which then rectifies the styling once some state is set. How can I detect in Next.js if it's a user's first visit without resorting to using a context provider that would require adding a consumer to every page?
Is there any workaround or solution for this longstanding issue? I have reached out to Material UI creators who indicated that an upcoming upgrade will address this, but until then, what steps should I take?