[Solved]-Is there way to add "Loading screen" when DOM rendering in Next.js app?-Reactjs

To achive this, I render my loader inside body tag in _document.js file. I thought a bit how to detect moment when all of my page content loaded (content, images, fonts, styles) and i got idea to load my fonts in footer, after all content, images and styles are loaded. I did it, by implementing useEffect() hook in my footer file, and load fonts like this:

const Footer = () => {
  React.useEffect(() => {
    let fonts = [];
    if (typeof window !== "undefinded") {
      // Initialize Font
      fonts.push(
        new FontFace("font1", "url(/fonts/font1.ttf)", {
          style: "normal",
          weight: "400",
        })
      );
      fonts.push(
        new FontFace("font2", "url(/fonts/font2.ttf)", {
          style: "bold",
          weight: "700",
        })
      );

      // Load all fonts
      for (var font in fonts) {
        document.fonts.add(font);
        font.load();
      }
      // Disable loading screen when all font are loaded
      document.fonts.ready.then(function (e) {
        document.getElementById("loading-screen").style.display = "none";
      });
    }
  }, []);

  return <>...Footer content</>;
};