How to handle loading state using useCollection

[kduvignau]

Hello! 👋

I'm building a SPA in vue 3 using firebase and Pinia.

I would like to understand how can I display a loading state with useCollection. Currently I'm following this page in the doc and this is what I have so far

// store
import { collection, orderBy, query } from "firebase/firestore";
import { defineStore } from "pinia";
import { useCollection, useFirestore } from "vuefire";

export const useUserStore = defineStore("user", () => {
  const db = useFirestore();

  const users = useCollection(query(collection(db, "users"), orderBy("createdAt", "desc")));

  return { users };
});

// component
<script setup lang="ts">
import { useUserStore } from "./stores/user";

const store = useUserStore();
</script>

<template>
  <pre>{{ store.users }}</pre>
</template>
});

I've found this discussion but I would like to know if there is a better solution than adding a callback to the promise.

Could someone provide an example on how handling this with the pending prop? 😊

Thanks!

[posva]

I think the documentation didn't have the example when you posted this but you can find them here: https://vuefire.vuejs.org/guide/realtime-data.html#Subscription-state