Loading component appears on top of the page

user_16134923 0
Viewed 136

I implemented a loading screen using a loader component on _app.js

function MyApp({ Component, pageProps }) {
const [loading, setLoading] = useState(false)

  Router.events.on('routeChangeStart', (url) => {
    setLoading(true)
  })
  Router.events.on('routeChangeComplete', (url) => {
    setLoading(false)
  })
  return(
    <>
     ..<Head> <meta> tags here..
     {loading && <Loader />}
       <Component {...pageProps} />;
    </>
   )
 }

The problem is, although the loader component <Loader/> appears, when I scroll down, the page's content represented by <Component {...pageProps} />; can still be seen. This would break the purpose of the loader component. I'm supposed to only see the loader component while the page is still rendering.

next.js reactjs
2 Answers

maybe you can use ternary operator loading ? <Loader /> : <Component {...pageProps} /> so when loading is true will be render Loader component, else when the loading is false then will be render Component. Full code in below:

function MyApp({ Component, pageProps }) {
const [loading, setLoading] = useState(false)

  Router.events.on('routeChangeStart', (url) => {
    setLoading(true)
  })
  Router.events.on('routeChangeComplete', (url) => {
    setLoading(false)
  })
  return(
    <>
     ..<Head> <meta> tags here..
     {loading ? <Loader /> : <Component {...pageProps} />}
    </>
   )
 }
user_167468470

You can try ternary condition for component. Check If loading is true then display Loader component else display <Component {...pageProps} /> .

return(
  <>
   {loading ? <Loader /> : <Component {...pageProps} />}
  </>
)
user_60464990
Related