Как показать индикатор выполнения при загрузке данных Firebase

Question

Как отобразить индикатор выполнения, пока данные из Javascript загружаются на веб-сайт.

  paperRef.once('value').then(function(snapshot) {
      numberOfPapers = snapshot.numChildren();
  });

Как отображать индикатор выполнения до подсчета numberOfPapers?

Answer 1

Метод once() является асинхронным и возвращает обещание.

Как объяснено в документации MDN :

Обещание находится в одном из следующих состояний:

• в ожидании: начальное состояние , ни выполнено, ни отклонено.
• выполнено: означает, что операция успешно завершена.
• отклонено: означает, что операция завершилась неудачей.

Вам необходимо покажите индикатор выполнения непосредственно перед вызовом метода once() и скройте его, если обещание выполнено или отклонено. Для этого вы будете использовать методы then() и catch() следующим образом:

  showProgressBar();
  paperRef.once('value').then(function(snapshot) {
      //Promise is fulfilled
      hideProgressBar();
      numberOfPapers = snapshot.numChildren();
  })
  .catch(error => {
      //Promise is rejected
      hideProgressBar();
      //Show an error message
  });

, так как вы не указали, какие именно индикатора выполнения, который вы планируете использовать, зависит от вас, чтобы реализовать методы showProgressBar() и hideProgressBar() (отображение / скрытие элемента div, изображение счетчика и т. д. c ...)