pause-hydration.jsx

function Hydrator(props) {
  const [isPaused, setIsPaused] = React.useState(typeof window !== "undefined");

  React.useEffect(() => {
    console.log("Loading polyfills...");
    setTimeout(() => {
      console.log("Done.");
      setIsPaused(false);
    }, 3000);
  }, []);

  return isPaused ? (
    <div dangerouslySetInnerHTML={{ __html: "" }} suppressHydrationWarning />
  ) : (
    props.children
  );
}

export default function MyApp({ Component, pageProps }) {
  return (
    <Hydrator>
      <div><Component {...pageProps} /></div>
    </Hydrator>
  );
}