Is my website loading while the spinner is shown?

Question

This is the App.js

import Newhome from './COMPONENTS/Newhome';
import HashLoader from "react-spinners/HashLoader";
import { useState ,  useEffect } from 'react';
import "./App.css";
function App() {
  const [loading, setloading] = useState(false);
  useEffect(() => {
    setloading(true);
    setTimeout(() => {
      setloading(false);
    }, 1785);
  }, [])
  return (
    <>
      {
        <>
          {
          loading ?
            <div className="App">
              <HashLoader className='loader' color={'#FF5757'} loading={loading}
                size={120} />
            </div>
            : (<Newhome />)
          }
        </>
      }
    </>
  );
}

export default App;

I am not sure if the website is loading while I am showing the spinner. I think the spinner is only shown for some seconds and after the website is shown without loading.

What is happening here?

This is the website My website

Answer 1

Use efffect runs after the render. Essentially is you're trying to show the spinner before the website loads then this is not the best approach. You can try code spliitting i.e

import React, { Suspense } from 'react';

import HashLoader from "react-spinners/HashLoader";
const Newhome  = React.lazy(() => import('./COMPONENTS/Newhome'));

function App() {
  return (
    <div>
      <Suspense fallback={<HashLoader/>}>
        <Newhome />
      </Suspense>
    </div>
  );
}