Next.js Show Loading Indicator Until Page Is Ready

How to show a loading indicator in Next.js page until the page is ready?

Here is the Next.js page code:

import { useEffect, useState } from 'react';

export default function Home() {
  // ##. variable to control display
  // ##. after data is fetched and ready
  const [dataReady, setDataReady] = useState(false);

  useEffect(()=>{
  // ##. This is to simulate an API data fetch call
    setTimeout(()=>{
      setDataReady(true)
    },3000);
  },[]);

  return (
    <>
      <h2>
        Page ready !!
      </h2>
      {
        dataReady &&
        <h3>
          Data is ready
        </h3>
      }
    </>
  )
}

If you run the above code, you can see that the page ready message show instantly the moment page is loaded. Data ready block appears only after the 3 seconds.

Now what we are trying to achieve here is to show loading until the data is ready.

Here is the solution:

import { useEffect, useState } from 'react';

export default function Home() {
  // ##. variable to control display
  // ##. after data is fetched and ready
  const [dataReady, setDataReady] = useState(false);

  useEffect(()=>{
  // ##. This is to simulate an API data fetch call
    setTimeout(()=>{
      setDataReady(true)
    },3000);
  },[]);

  // ## Loading will be show until data is ready
  if(!dataReady) return(<><p>Loading ..</p></>)

  return (
    <>
      <h2>
        Page ready !!
      </h2>
      {
        dataReady &&
        <h3>
          Data is ready
        </h3>
      }
    </>
  )
}