Adding VueJS Loading State Indicators (Promises)

Add Loading State Indicators to VueJS

Read full post here

While trying to figure out a good way to manage loading state for Promatia's sign up form and other asynchronous pages & components. I stumbled upon a neat way of managing asynchronous loading state.

Web apps often require loading state (things like loading spinners) to let a user know that an operation is taking place. These operations often take time, so it's best to let the user know something is loading, which helps improve UX and prevents form resubmissions and etc.

I created a neat module that can help with managing asynchronous loading state (promises) in a VueJS app

import { ref, computed } from '@vue/composition-api' // using vue 3 syntax

export default function () {
    let loading = ref(false) //initial value of false

    return computed({
        get () {
            return loading.value // return the loading value
        },
        async set (value) {
            loading.value = true //update loading ref value to be true
            await value //wait for promise completion
            loading.value = false //update loading ref back to false
        }
    })
}

The way it's used:

<button @click="promise = asyncFunction()">Click<button/>
<overlayLoader v-if="promise"/>

import promiser from '@/utils/promiser' //the helper we've just created 

export default {
    setup(){
        return {
            promise: promiser() //create and expose an instance of the computed variable
        }
    }
}

<overlayLoader/> is a component which displays a sync loader animation on top of a form, which captures clicks and prevents further actions

When <button> is clicked, it triggers the set() function inside the computed variable, which updates the loading state.

After clicking