One trick to make your web application feel smoother

It’s 2018 and we all want things to work, or at least, feel smoother.

Sometimes slowing some things down helps us improve the overall user experience of our applications.

One example of things we can slow down to make the app feel smoother is the loading/working state of buttons.

Whenever we click on something we expect some kind of feedback, but sometimes that action can be so fast that the working state, our feedback, will go unnoticed – leaving us guessing if our action was processed or not.

What we could do is to throttle the promise. Make it so it takes at least n milliseconds to resolve, giving us enough time to notice the loading state.

// Creates a new promise that automatically resolves after some timeout:
Promise.delay = function (time) {
    return new Promise((resolve, reject) => {
        setTimeout(resolve, time)
    })
}

// Throttle this promise to resolve no faster than the specified time:
Promise.prototype.takeAtLeast = function (time) {
    return new Promise((resolve, reject) => {
        Promise.all([this, Promise.delay(time)]).then(([result]) => {
            resolve(result)
        }, reject)
    })
}

// Make sure this doesn't resolve for at least 300ms, useful for things like
// keeping a loading spinner on screen just long enough to not look janky:
axios.post('/published-products', payload)
    .takeAtLeast(300)
    .then(response => {
        this.loading = false
        // ...
    })
    .catch(response => {
        this.loading = false
        // ...
    })

via @adamwathan

Subscribe to get my latest blog posts.