Promise.takeAtLeast

promise-take-at-least.js

// 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
        // ...
    })

Found out that it works more reliable in Firefox if you're using

window.Promise = Promise
window.Promise.prototype.takeAtLeast = ...

You should be able to simplify the takeAtLeast proto function by not creating an additional promise around Promise.all. See below:

Promise.prototype.takeAtLeast = function(time) {
    return Promise.all([this, Promise.delay(time)]).then(([result]) => result);
}

This is great, but can't seem to get it to work in IE Edge! "Object doesn't support property or method 'takeAtLeast'" @adamwathan