Loading Page Timer

Вариант 1

./components/loading-skeleton.tsx

"use client";

import { useEffect, useState } from "react";

export default function Loading() {
  const [dataReady, setDataReady] = useState(true);

  useEffect(() => {
    setTimeout(() => {
      setDataReady(false);
    }, 500);
  }, []);

  return (
    <>
      {dataReady && (
        <div className="fixed inset-0 z-[9999] flex items-center justify-center bg-background">
          <p>Loading ..</p>
        </div>
      )}
    </>
  );
}

Вариант 2

./components/loading-skeleton.tsx

"use client";

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>
      }
    </>
  )
}