Fix styling flicker on page load

[richardolsson]

Description

This PR fixes an undocumented visual issue that would sometimes manifest on initial load. The problem seems to be that the DOM is rendered before loading JS, which is where the styling is. The changes in this PR were suggested to a similar problem reported as an MUI issue.

Screenshots

This video first browses to a survey running on main, and then on this branch. Note how the page flickers with a huge icon and unstyled text in the first tab, but not in the second tab.

flicker-vs-nonflicker.mov

Changes

• Adds a provider for the emotion cache to pages in both the app router and the pages router

Notes to reviewer

This problem manifests most clearly on the new surveys page. You should be able to see the problem on any survey page runningmain but not on this branch.

• Example on main
• Same survey running on this branch

Related issues

Undocumented

[ziggabyte]

Don't we all need a cache for our emotions 😎

When I test it I can clearly see the difference, no noticable flicker for me (in firefox 🦊 ) on this branch, noticable flicker on main.