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 ) 



22 thoughts on “Loading a gif then transition to the web page on reactjs”

  1. 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();
    }, [])
    
    Reply

Leave a Comment