Show loading spinner with minimum time

Question

I implemented a page loader during axios request but it shows for a very short time. How to show it for a minimum 2 seconds or with fancy fade in react? Is it possible?

const Loader = () => (
    <div class="divLoader">
      Loading..
    </div>
 );

class dashboard extends Component {
    constructor(props) {
        super(props);
        this.state = {
            loading: true,
            data: [],
        }
    }

    componentDidMount() {
            axios.get("http://localhost:8080/user/dashboard")
            .then((res) => {
                const data = res.data;
                this.setState({ data, loading: false })

            }, (error) => {
                this.handleLogout();
                console.log("dasboard ERR");
            });


    }


    render() {
        return (
            <div className="container-xxl">
                 {this.state.loading ? <Loader /> : <Content />}
             </div>
    )};

}

Answer 1

You have to design what you're trying to achieve by considering two things.

If your API response time is very low then keep the loader for an extra few times by applying a setTimeOut. But here you've got another thing to keep in mind. What if your API response time takes a moderate time which is enough as the lifetime of a loader to show? In this case, you may not keep your loader for extra time as that will make the visitors bored. So, what you have to do is keeping a timer. Say, x(in milisecond) is the least time you want to show the loader. If elapsed time (or the time API is taking to respond i.e., the loader is live for this time) is greater than x then you're done. If not then setTimeOut for (x - elapsed time).