CODEWITHSUNDEEP
reactjsfirebasegoogle-cloud-firestore
Oliver Juhl
Oliver Juhl

Reputation: 115

Showing loading indicator while writing data to Firestore

I have a question regarding the fact, that i cant seem to figure out how to show a loader when updating firestore.

I have provided this following example, but dont mind the things i have used in the example. The point is, that I cant seem to figure out how to show a loading indicator until all creations or updates are completely finished.

If i try to setstate before and after the firestore call, the spinner will only appear in 1 second, since the actual call is running in the background (asynchronously i think) when it is updating the firestore.

Can anyone please help me out?

Thanks in advance. 

array.forEach(itemInArray => {
db.where(test, '==', itemInArray.test )get()
  .then((result) => {
    // try to update doc first
    db.doc(result.docs[0].id).update({
      test: 'test'
    });
  })
  // update successfull
  .then(() => console.log('Document exists! We have updated the current one'))
  // If the update failed, we create new doc
  .catch((err) => {
    console.log('Created document);
    db.doc().set({
      test: 'test'
    });
  });

});

Upvotes: 1

Views: 1252

Answers (1)

Kraylog
Kraylog

Reputation: 7553

As we discussed in the chat, if your database operations need to be sequential, you could do something like this:

showSpinner();
updateFirstThing()
  .then(() => updateSecondThing())
  .then(() => updateThirdThing())
  .catch(err => handlerError(err))
  .finally(() => hideSpinner());

If some of the operations can be parallel, you'd need to consider using Promise.all to make sure the spinner is hidden when all of the promises are fulfilled (or there was an error).

Upvotes: 1

Related Questions