Loading Screen ReactJS

Question

I'm loading to implement a loading screen using an animation from LottieFiles. I seem to be getting some error, prob a syntax error that I can't resolve. Would really appreciate the help.

import "./App.scss"
import { useState, useEffect } from "react";
import Menu from "./components/Menu/menu" ; 
import Lottie from 'react-lottie';
import animationData from "./loading.json";


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

  useEffect(() => {
      setLoading(true)
      setTimeout(()=>{
        setLoading(false)
      },5000)
  },[])

  const loadingscreen = {
    loop: true,
    autoplay: true,
    animationData: animationData,
    rendererSettings: {
      preserveAspectRatio: "xMidYMid slice"
    }};

  return (
    <div className="app">
      {loading ? (
      <Lottie options={loadingscreen} />
          ) : (
      <Topbar menuOpen={menuOpen} setMenuOpen={setMenuOpen}/>
      <Menu menuOpen={menuOpen} setMenuOpen={setMenuOpen}/>
    }
    </div>   
  );
}

export default App;

DiluzFerz · Accepted Answer · 2021-06-16T13:21:21.977

Return part should be like this:

return (
   <div className="app">
        {loading ?     
           <Lottie options={loadingscreen} />
           :
           <>
               <Topbar menuOpen={menuOpen} setMenuOpen={setMenuOpen}/>
               <Menu menuOpen={menuOpen} setMenuOpen={setMenuOpen}/>
           </>
        }
   </div>   
);

And also instead of <> </>, you can use <React.Fragment> as well.

return (
   <div className="app">
        {loading ?     
            <Lottie options={loadingscreen} />
            :
            <React.Fragment>
                <Topbar menuOpen={menuOpen} setMenuOpen={setMenuOpen}/>
                <Menu menuOpen={menuOpen} setMenuOpen={setMenuOpen}/>
            </React.Fragment>
         }
   </div>   
);

Loading Screen ReactJS

1 Answers1