Add a callback when data is ready

[posva]

This would allow SSR
Helpful SO question: http://stackoverflow.com/questions/27978078/how-to-separate-initial-data-load-from-incremental-children-with-firebase/27995609#27995609
#68

[shershen08]

The referenced SO post is truely helpfull.
However I could not get new Firebase() with only including
https://gstatic.com/firebasejs/3.5.2/firebase.js for Vuefire.

[jwngr]

new Firebase() is the syntax for the legacy SDKs. You should use firebase.initializeApp() instead. See Add Firebase to your app for more information.

[ruvido]

Is this a necessary feature to show a spinning wheel (Loading...) while waiting for data? I cannot find a way to do that within vuefire.

[shershen08]

@ruvido agree, that could simplify that common case usage.
the solution I took from that stackoverflow post and used looks like this:

//firebase for Vue init
var firebaseApp = firebase.initializeApp(config);
var db = firebaseApp.database();

//..

//firebase loaded callback
db.ref('products').once('value', function() {
  //e.g. some other non-Vue but related to data utils can run here
  extractItemsArray(__app__.products);
  //hide DOM element with preloader 
  $('.preloader').hide();
});

[posva]

@ruvido It's not necessary because as @shershen08 said you can do it yourself. It could however improve the API a bit 🙂

[ruvido]

@shershen08 thanks for the input
@posva yes sure, my question was about vuefire

My strategy is very similar to what @shershen08 posted:

mounted: function () {
  firebase.database().ref('events/2017-02-sorrento/users/').once('value', snapshot => {
    this.loading = false
  })
}

In the component I have a v-if to show/hide the spinner:

<div v-if="loading" class="spinner">...</div>

It'd be neat to do it within vuefire

[posva]

before releasing this I'm making sure this allows SSR

[fergardi]

Any progress in this?

I'm binding an array of data like this:

// ...
firebase: {
  list: database.ref('list')
}
// ...

How can I get the readyCallback() method to know all the data has been fetch from Firebase si I can unhide a progress spinner?

Thank you.

[posva]

This should work:

firebase () {
	return {
		list: {
			source: database.ref('list'),
			readyCallback: () => this.loading = false
		}
	}
}

[fergardi]

Thanks for your quick response. Unfortunately, it gives me the following error:

firebase () {
  return {
    list: database.ref('list', { readyCallback: () => { this.loading = false } })
  }
},

[posva]

oh, lol what am I saying. You need to use the object syntax. Updated my comment. It's all in the Readme: https://github.com/vuejs/vuefire#usage

[fergardi]

Works like a charm. Thank you.