2022-08-11 23:22:19 +02:00
|
|
|
// This wrapper function is used to safely select the best available function
|
|
|
|
// to schedule removal of the no-FOUC styles workaround. requestAnimationFrame
|
|
|
|
// is the ideal choice, but when used in iframes, there are no guarantees that
|
|
|
|
// the callback will actually be called, which could stall the promise returned
|
|
|
|
// from displayContent.
|
|
|
|
//
|
|
|
|
// See: https://www.vector-logic.com/blog/posts/on-request-animation-frame-and-embedded-iframes
|
|
|
|
const safeCallbackQueue = (callback: () => void) => {
|
|
|
|
if (window.requestAnimationFrame && window.self === window.top) {
|
|
|
|
window.requestAnimationFrame(callback)
|
|
|
|
} else {
|
|
|
|
window.setTimeout(callback)
|
|
|
|
}
|
|
|
|
}
|
2022-05-05 02:11:36 +02:00
|
|
|
|
2022-02-02 16:08:16 +01:00
|
|
|
// 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(): Promise<void> {
|
|
|
|
return new Promise((resolve) => {
|
2022-08-11 23:22:19 +02:00
|
|
|
safeCallbackQueue(function () {
|
2022-02-02 16:08:16 +01:00
|
|
|
for (
|
|
|
|
var x = document.querySelectorAll('[data-next-hide-fouc]'),
|
|
|
|
i = x.length;
|
|
|
|
i--;
|
|
|
|
|
|
|
|
) {
|
|
|
|
x[i].parentNode!.removeChild(x[i])
|
|
|
|
}
|
|
|
|
resolve()
|
|
|
|
})
|
|
|
|
})
|
|
|
|
}
|