How to hide/show all react component when loading screen is showing up?-CodePudding

For my case, loading screen will show up if the page is changed.
for example:
http://localhost:3000/ ----> http://localhost:3000/fr
loading screen will show up for page transition

I want to hide other component. How can I do that?

import "tailwindcss/tailwind.css";
import "../styles/main.css";
import Router from "next/router";
import { useState } from "react";
import Loader from "../components/Loader/Loader";

function MyApp({ Component, pageProps }) {
  const [loading, setloading] = useState(false);
  Router.events.on("routeChangeStart", (url) => {
    // inspect the router changing start
    console.log("Router change...");
    setloading(true);
  });

  Router.events.on("routeChangeComplete", (url) => {
    // inspect the router changing complete
    console.log("Router change completed");
    setloading(false);
  });

  return (
    <>

      <Loader loadingbool={loading}/>
      <Component {...pageProps}/>
    </>
  );
}

export default MyApp;

CodePudding user response：

You can add some conditions in your JSX with a ternary that depends on the value of loading

  return (
      <>
        {loading ? <Loader loadingbool={loading}/> : <Component {...pageProps}/>}
      </>
    );

CodePudding user response：

By using the boolen expression we can hide the screen data

 return (
      <>
        {loading ? <Loader loadingbool={loading}/> : <Component {...data}/>}
      </>
    );