[Vuejs]-Page gets rendered before data is fetched

by

0👍

you have to use the v-if directive

export default {
    data() {
        return {
            user: {},
            isLoading: false
        }
    },
    async fetch() {
        this.isLoading = true
        const data = await this.$axios.$get('/users?name=' + this.$route.params.name)
        this.user = data
        this.isLoading = false
    }
}

…

<div>
    <div v-if="isLoading">Loader</div>
    <div v-else>Fetched content</div>
</div>

0👍

The thing you want to place it in these situations are called preloaders or you can also use skeletons from antd if you are using it. Here’s a link for skeleton

https://ant.design/components/skeleton/#header

Also search for preloaders and you will find many in codepens or other links and implement those in your projects.

The concept behind preloaders is that they will be shown as the first thing in your page and when content is loaded you just hide or remove them completely from page.

Leave a comment