How to display loading gif in vue 3 composition api-CodePudding

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  :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>

CodePudding user response：

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.