CODEWITHSUNDEEP
javascriptreactjsreact-reduxgif
Max
Max

Reputation: 442

Loading a gif then transition to the web page on reactjs

I have a react js application when loading a page there is a gif loading at the beginning. I want a way so that the whole website is fully loaded and then the gif will stop and a transition will be made to show a ready website, this transition can be fade or growing circle, currently the gif is hardcoded with a timeout is there a way to do this ?

currently this is the code responsible for loading the gif :

The loader.js file :

import loder from "../assets/gifs/loading.gif"
const Loader = () => {
    return (
        <div
        style={{
          background: "#F7D036",
          height:'100%',
          width:"100%"

        }}
      >
          
        <br/><br/><br/><br/><br/><br/><br/><br/><br/>  
        <center>
        <img src={loder} height="200" alt=""/></center>
         </div>
    )
}

The app.js file :


  useEffect(() => {
  
    getAllCategories();
    setTimeout(() => setLoading(false), 2000);
  }, [getAllCategories]);

 return (
    <Router>
      {loading == true ? (
        <Loader />
      ) : (

some code )

Upvotes: 1

Views: 1557

Answers (1)

SARAN SURYA
SARAN SURYA

Reputation: 554

we can use the approach of window.onload() event listener, in your case the execution would be like, And also you need to use states to manage them effectively

window.onload = (e) => {
    // your state changes here
    setLoading(false);
}

The window.onload listener will wait for the entire page to load, and you have to initiate the loader first, and then toggle this function using the useEffect like

useEffect(()=>{
    // 
    setLoading(true);
    // wrap the window.onload event inside a function and call it here
    windowLoadFunction();
}, [])

Hello max, as per the comment, so what we can do is that have your loader initiated like you have to set the state of loader as true by default, so initially your page will start loading, So you can use the useState property to set it to true by deault, and add a css class to the loader and also add an id so we can fetch it with document.getElementById(), and so as stated in the answer, when we toggle the loader state to false, we can change the class of the loader by accessing it like document.getElementById("loader").className = "your animated css fade out class", and that's it, so, if you want your loader to fade away first then call the class change method first and then you can call the setLoader class to false,

const [loading, setLoader] = useState(true);

useEffect(()=>{
  window.onload = ()=>{

     // changing class of the gif to fade out using css
     // change the time in this setTimeout function so that is it triggered as soon as your animation ends, match it with the animation duration, and have it started like 20 milli seconds before your animation ends,
     
     document.getElementById("loader").className = "fade-out-loader";
     setTimeout(()=>{
        //this will make sure the loader is not showed anymore, and your main content will popup 
        setLoader(false)
     }, 60) 
     
// match time of the loader out transition so the transition will be smooth
    
}
},[])

{!loading}?
  <div>Main content</div>:
  <div class = "loader-class" id = "loader">Loader element</div>

Your css class should look like (App.css)

.loader-class{
    dispaly:visible;
  }

.fade-out-loader{
   //add an fade animation to this class, you can get them at Animista
}

Upvotes: 1

Related Questions