When using a query in useCollection, pending is always false

[kduvignau]

Reproduction

https://stackblitz.com/edit/vitejs-vite-iapj2w?file=src/App.vue

Steps to reproduce the bug

Install vuefire@3.1.0
Run the following code

<script setup lang="ts">
import { collection, orderBy, query } from "firebase/firestore";
import { useCollection, useFirestore } from "vuefire";

const db = useFirestore();

const { data, pending } = useCollection(query(collection(db, "users"), orderBy("createdAt", "desc")), { ssrKey: "users" });
</script>

<template>
  <div>
    {{ data.length }} - {{ pending }}
  </div>
</template>

Expected behavior

• On first render, data.length should be 0 and pending should be true.
• Once the query is completed, pending should be false

Actual behavior

• data.length is 0 as expected but pending is false

Additional information

It works as expected when using useCollection without a query

const { data, pending } = useCollection(collection(db, "users"));

Note : my app is a SPA (I don't use Nuxt)

[kduvignau]

Hello @posva 👋

I just added a repro link, let me know if you need more information!

Thanks!

[BenJackGill]

Can confirm this. I am having the same problem.