How to display loading gif in vue 3 composition api

Question

I'm very new to vue. what I'm trying to do is have a loading gif while waiting for the endpoint to return.

I'm trying to use watchEffect, but I can't figure it out. If it's the right way how do I do it? If not what should I use instead?

Thanks

EDIT: Code

<template>
    <div class="player-list" :key="playerList.id" v-for="playerList in players.playerLists">
        <PlayerList :playerList="playerList" />
    </div>
</template>

<script>
import getPlayers from "@/composables/getPlayers";
import PlayerList from "@/components/PlayerList";
import { watchEffect } from 'vue';

export default {
    name: 'PlayerLists',
    components: {
        PlayerList
    },
    setup() {

        const { players, error, load } = getPlayers() //request endpoint
        load()

        watchEffect(() => {
            console.log('watch effect function')
        })

        return { players, error }
    }
}
</script>

Welcome to SO! You should show what you have so far. – matthew-e-brown Feb 19 '22 at 04:54 — matthew-e-brown, Feb 19 '22 at 04:54
Thanks!! I edited my question with the code – Angel Feb 19 '22 at 05:04 — Angel, Feb 19 '22 at 05:04

score 8 · Accepted Answer · answered Feb 19 '22 at 05:09

Vue apps should be data-driven. So, instead of relying on effects, change how your app looks by setting your data. If you're fetching some data from an endpoint, it's safe to assume you'll be putting it somewhere to display it in your app, like a Ref.

So, why not display your loading spinner as long as your Ref is not the data it is waiting to become? i.e., display a GIF while someRef == null?

<template>
  <img v-if="data === null" src="./img/loading.gif" alt="Loading" />
  <div v-else>
    <div>Here's the data!</div>
    <pre>{{ data.toString() }}</pre>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue';

export default {
  setup() {
    const data = ref(null);

    onMounted(() => {
      // Replace this `fetch` call with whatever your endpoint call may be.
      fetch('./endpoint')
        .then(resp => resp.json())
        .then(json => data.value = json);
    });

    return { data };
  }
};
</script>

Does that make sense? Your app should be modelling your data. You can take advantage of the fact that "a loading GIF should only be displayed while we do not have the data" to, well... display a GIF as long as the data is unset.

yeah it makes sense and works! thanks Matthew – Angel Feb 19 '22 at 05:56 — Angel, Feb 19 '22 at 05:56
Glad I could help. :) – matthew-e-brown Feb 19 '22 at 05:57 — matthew-e-brown, Feb 19 '22 at 05:57

score 0 · Answer 2 · answered Aug 15 '23 at 12:32

This is an example using the latest syntax with <script setup> and computed()

<template>
    <img v-if="loading" :src="your/path.gif" />
</template>

<script setup>
import { computed, onMounted, ref } from 'vue';

const data = ref();
const loading = computed(() => data.value? true : false);

onMounted(() => {
  try{
    const resp = await fetch('your-api/url')
    data.value = resp;
  }
  catch (error){
    console.log(error);
  }
})
</script>

Similar to normal refs, you can access the computed result as loading.value. Computed refs are also auto-unwrapped in templates so you can reference them without .value in template expressions.

A computed property automatically tracks its reactive dependencies. Vue is aware that the computation of loading depends on data, so it will update any bindings that depend on loading when data changes.

In case you are having issues with the gif not been loaded from the start of the animation each time, check this here.

How to display loading gif in vue 3 composition api

2 Answers2