Only show loading spinner on long requests

hyphen 0
Viewed 22

I'm trying to get a loading spinner to only display on requests greater than 200 ms. I thought I had it working, but it seems the events are fired out of order somehow.

This is from my loading-spinner.js class:

class LoadingSpinner {
    constructor(milliseconds) {
        this.timeoutId = null;
        this.milliseconds = milliseconds;
    }

    waitForLongRequest() {
        this.timeoutId = setTimeout(() => {
            console.log('waiting for long request');
            console.log(this.timeoutId);
            document.body.classList.remove("loaded");
        }, this.milliseconds);
    }

    cancel() {
        console.log('canceling long request');
        console.log(this.timeoutId);
        clearTimeout(this.timeoutId);
        document.body.classList.add("loaded");
    }
}

export default LoadingSpinner;

This is from my app.js:

import LoadingSpinner from './custom/loading-spinner.js';

document.addEventListener("DOMContentLoaded", () => {
    var ls = new LoadingSpinner(200);

    Livewire.hook('message.sent', (message, component) => {
        console.log('message.sent fired');
        ls.waitForLongRequest();
    });

    Livewire.hook('message.processed', (message, component) => {
        console.log('message.processed fired');
        ls.cancel();
    });
});

Here's the output from my console. The last request causes the spinner to show indefinitely.

enter image description here

laravel-livewire laravel javascript
1 Answers

In addition to @user3252327 comments, this is the fix:

waitForLongRequest() {
    if (this.timeoutId) {
        this.cancel()
    }
    this.timeoutId = setTimeout(() => {
        console.log('waiting for long request');
        console.log(this.timeoutId);
        document.body.classList.remove("loaded");
    }, this.milliseconds);
}
IT goldman0
Related