Subscription state destructure

[Daniel-Uzcategui]

Hi! amazing project been using it for years, now it was time to move on into vue 3 I'm still getting used to pinia plus vuefire, I was trying to destructure a subscription following the guide just to make a componen show the subscription its still loading this is what I have

/// Pinia store part

const {
        data: list,
        pending: listLoading,
        promise: listPromise,
        error: listError,
      } = useCollection(listSource);

/// then in my component

<script setup>
import { useProjectStore } from "stores/Project";
const loading = computed(() => projectStore.listLoading);
</script>

I tried using loading in the template and always returns false, even when the data is clearly pending, I tried using the promise but it seems I'm missing something

[posva]

Thanks! I’m glad you like it!

the pending variable should be true initially while the data is being fetched for the first time or if listSource is a ref and changes to a new collection. Do you have more information? Is this in an SPA, Nuxt?

[TomKaltz]

I noticed the same thing with pending. Before the initial date is loaded the pending ref value is false. I'm not sure it is ever true.

[posva]

If you render on the server, it will start as false too

[TomKaltz]

Ok just letting y'all know I cannot use the "pending" ref in the way that seems intuitive. I have to do the following to get the behavior that "pending" should exhibit.

vueFireReactiveCollection.promise.value.then(() => {
  // set app loading state false
})

[kduvignau]

Hello @posva, would it be possible for you to share an example of how to use pending correctly?

I'm currently working on a single page application and have noticed that pending is always returning false. I would appreciate any guidance or insights you may have on the matter.

Thank you!

[posva]

it shouldn't be always returning false. There were some bugfixes along the way so if you are still facing issues, a reproduction would help to check 🙂