Next Document

Sometimes content on the page take time to load, because of which the user might see the content with improper design. To avoid that we could show the loader untill the content is loaded properly.

Below is our code for showing loader for 1 second on intial page load. This code is in the file app.vue, you can find this file on this path: src>Layout>Loader

import React, { Fragment,useState,useEffect } from 'react';


const Loader = () => {

    const [show, setShow] = useState(true);
    
    useEffect(() => {
        const timeout = setTimeout(() => {
            setShow(false)
            }, 1000);

        return () => {
            clearTimeout(timeout);
            }
       
    },[show]);

    return (
        <Fragment>
            <div className={` loader-wrapper ${show ? '' : 'loderhide'} ` }>
                <div className="loader-index"><span></span></div>
                <svg>
                    <defs></defs>
                    <filter id="goo">
                    <fegaussianblur in="SourceGraphic" stdDeviation="11" result="blur"></fegaussianblur>
                    <fecolormatrix in="blur" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9" result="goo">    </fecolormatrix>
                    </filter>
                </svg>
            </div>
        </Fragment>
    );
}

export default Loader;

We have added the loader div and given the animation in its scss file.

To show and hide the loader we toggle loaderhide class through show variable. Style for the loaderhide class has been define below, it toggles display of the div between none and visible. Initially we have kept show to true, but when the component is mounted we run a function which call the settimeout function. settimeout functions overwrites the value of show variable to false after 1 second.

If you want to make changes in the animation or the design of the loader, you can navigate toassets > scss > components > _loader.scss. Here default styles and animation has been given, make changes as per your needs.

You can modify the timing of the loader by changing the time in settime function. Instead of 1000ms you can set any time as per your needs.