Hook logic in between stream : Rxjs Firebase Firestore - firebase

Question

this.store
.collection(collectioName)
.onSnapshot((data) => {
});
We can listen to a document with the onSnapshot() method. Each time the contents change, another call updates the document snapshot.
I am looking for hook/rxjs operator that we can use in between, when the data is about to change/emitted and data received by stream.
It will be helpful to
show loading spinner when we get new data or
disable form or table
when we received new update
Something like
this.store
.collection(collectioName)
.onSnapshot()
.pipe(
aboutToInitiate(() => { // start spinner },
dataReceived(() => { // stop spinner, stream received }
).subscribe(() => {
// Or we can stop spinner here, but where exactly we hook the logic to start spinner
);
Note: When creating/updating ( triggered manually ) we can start
spinner and stop on success.
But when the stream return an update that is triggered by server or real time update,
when we are subscribed at that time we need to show spinner or indicator
that we are about to receive some data and data updated/received.
So in short a hook in between subscription that automatically start spinner when about to receive data and stop automatically when data receives.
We can use tap operator but that will fire after data received not when it's initiating the process of getting update.

Answer 1

The onSnapshot() is listening to data changes in realtime. That means you can have a spinner only on initialisation. Every change after that happens immediately your device receives it from the backend or changed from your device.
You could start a Spinner before you initialize the onSnapshot()
//START Spinner
const unsub= this.store
.collection(collectioName)
.onSnapshot((data) => {
//STOP Spinner
});
//Stop listener
unsub()
With the unsub you can stop listening to realtime changes.
One thing you should consider is if you have offline capabilities enabled. In that case you could listen to both changes: data written do device cache and data written to backend.
You can do that by enabling the metatadat changeds to your listener like here:
db.collection("cities").doc("SF")
.onSnapshot({
// Listen for document metadata changes
includeMetadataChanges: true
}, (doc) => {
// ...
});
You can detect then if the data is writen only to the device or to the server:
db.collection("cities").doc("SF")
.onSnapshot((doc) => {
var source = doc.metadata.hasPendingWrites ? "Local" : "Server";
console.log(source, " data: ", doc.data());
});
You can find more about it here.
You could us that metada to determin when the data is written localy (then start the spinner) and when it's written to the server (stop the spinner)