rsnext/packages/next/client/dev/fouc.js
Joe Haddad 67ff62507d
Do not remove no-FOUC styles too early (#14448)
We previously used to remove our FOUC helper inside of the style injection to ensure content was shown as fast as possible.

This behavior, however, was problematic for a few reasons:

1. Large JavaScript chunks would take longer than an animation frame to parse, causing FOUC
1. Rendering would sometimes complete before an animation frame, causing improper effects

To fix the latter, we started removing the no FOUC helper **before** rendering, however, we never fixed the former by removing the dead code.

There's not a great way to test this because the FOUC is so fast and flaky, however, this code really shouldn't exist and isn't likely to be re-added (regress).

Also, we already have FOUC tests that occasionally flake, probably due to this.


Fixes #12448
Fixes #13058
Fixes #11195
Fixes #10404
2020-06-22 14:10:19 +00:00

17 lines
533 B
JavaScript

// This function is used to remove Next.js' no-FOUC styles workaround for using
// `style-loader` in development. It must be called before hydration, or else
// rendering won't have the correct computed values in effects.
export function displayContent(callback) {
;(window.requestAnimationFrame || setTimeout)(function () {
for (
var x = document.querySelectorAll('[data-next-hide-fouc]'), i = x.length;
i--;
) {
x[i].parentNode.removeChild(x[i])
}
if (callback) {
callback()
}
})
}