Immediately showing website Home page before the preloader page render

Question

I have created a website from React. recently I have implemented a preloader page for my website. But the issue is immediately showing website Home page before that preloader page render. How I fix this issue? showing below loader component and app.js file. I'm using Lottie package for Loader component.

Loader component

import React from "react"
import Lottie from "react-lottie"
import * as loading from "../../assets/paperplane.json"
import "./Loader.css"

const defaultOptions = {
  loop: true,
  autoplay: true,
  animationData: loading.default,
  rendererSettings: {
    preserveAspectRatio: "xMidYMid slice",
  },
}

const Loader = () => {
  return (
    <div className="loader">
      <div className="active">
        <Lottie options={defaultOptions} height={400} width={400} />
      </div>
    </div>
  )
}

export default Loader

App.js

import React, { useState, useEffect } from "react"
import { BrowserRouter, Route, Switch } from "react-router-dom"
import Header from "./components/header/Header"
import Loader from "./components/loader/Loader"
import Home from "./screens/Home/Home"
import Works from "./screens/Works/Works"
import About from "./screens/About/About"
import Contact from "./screens/Contact/Contact"
import WebProjects from "./screens/WebProjects/WebProjects"
import DesignProjects from "./screens/DesignProjects/DesignProjects"

function App() {
  const [loading, setLoading] = useState(false)

  useEffect(() => {
    setLoading(true)
    setTimeout(() => {
      setLoading(false)
    }, 5000)
  }, [])
  return (
    <>
      {loading ? (
        <Loader loading={loading} />
      ) : (
        <BrowserRouter>
          <Header />
          <main>
            <Switch>
              <Route path="/" component={Home} exact />
              <Route path="/about" component={About} />
              <Route path="/works/web-projects" component={WebProjects} />
              <Route
                path="/works/designs-projects"
                component={DesignProjects}
              />
              <Route path="/works" component={Works} />
              <Route path="/contact" component={Contact} />
            </Switch>
          </main>
        </BrowserRouter>
      )}
    </>
  )
}

export default App

Answer 1

If I understood correctly you just need to change this line

  const [loading, setLoading] = useState(true) // instead of false

Since you anyway need loader to be showed first.

I think you also can remove first selsetLoading

  useEffect(() => {
    // setLoading(true) - can be removed
    setTimeout(() => {
      setLoading(false)
    }, 5000)
  }, [])