How can I make vuefire show loading screen?

Question

As title Vuefire can auto get data from firebase database, but it needs some loading time. So I want to display some css animation before data being fetched, is there any event can I $watch when it successed

try using [vue-spinner](http://greyby.github.io/vue-spinner/) if check data v-show — aofdev, Aug 20 '17 at 14:14

score 4 · Answer 1 · answered Sep 06 '19 at 05:59

The readyCallback approach in the other answer didn't work for me. I got an error document.onSnapshot is not a function.

Instead, I used the binding approach to set a flag when loading is complete.

<script>
    // ...

    export default {
        data() {
            return {
                data: [],
                loaded: false,
            }
        },
        mounted() {
            this.$bind('data', firebase.firestore().collection('someDocRef'))
                .then(() => this.loaded = true);
        },
    }
</script>

Then my template can have conditionally-rendered loading screens:

<template>
    <template v-if="!loaded">
        <p>Loading...</p>
    </template>

    <template v-if="loaded">
        <!-- Display data here -->
    </template>
</template>

This works for me and should be ticked as the answer instead. Although, a little change in my code compared to this answer mounted() { this.$bind("data", db.collection("documents")).then( () => (this.loaded = true) ); } Instead of `firebase.firestore`, I used `db.collections...` which is what I exported from my firebase config file. — Peoray, Oct 24 '19 at 17:15

score 3 · Accepted Answer · answered Aug 21 '17 at 05:19

You can do this multiple ways. Vuefire has readyCallback out of the box which is callback called when the data is fetched (ready).

Here it is:

var vm = new Vue({
  el: '#demo',
  data: function() {
    return {
       loaded: false
    }
  }
  firebase: {
    // simple syntax, bind as an array by default
    anArray: db.ref('url/to/my/collection'),
    // can also bind to a query
    // anArray: db.ref('url/to/my/collection').limitToLast(25)
    // full syntax
    anObject: {
      source: db.ref('url/to/my/object'),
      // optionally bind as an object
      asObject: true,
      // optionally provide the cancelCallback
      cancelCallback: function () {},
      // this is called once the data has been retrieved from firebase
      readyCallback: function () {
         this.loaded = true // NOTE THIS LINE
      }
    }
  }
})

How can I make vuefire show loading screen?

2 Answers2