Как правильно извлекать и заполнять данные из коллекций Firebase?

Question

Итак, у меня есть компонент под названием Агенты, по своей природе это таблица со строками, которые содержат данные об агентах.

Я хочу получить полные данные об агентах из хранилища, заполнить их данными из другой коллекции в хранилище и затем отобразить их на экране.

Вот рабочий фрагмент кода, но у меня есть несколько вопросов:

1. Почему сейчас у меня рендер с некоторой задержкой?(Сначала у меня есть счетчик об загрузке - это нормально, я ожидаю этого, но затем счетчик скрывается, и я вижу 1 агента в таблице в течение 0,5 с, а затем я вижу все данные. Я хочу видеть все данные после того, как счетчик пропал.проблема моего кода?

2. Как заполнить данные. Может быть, есть другой способ сделать это, или, может быть, есть другая хорошая практика, потому что я думаю, что мой "componentDidMount" ужасен,Решения, которые я использую, не являются общими, я думаю.

Итак, для 2 вопросов я опишу, что я хочу:

В коллекции пользователей у меня есть документы, они являются объектами,у которого есть свойство с именем - profile . Это свойство содержит идентификатор документа из коллекции с именем role ! Я хочу получить эти данные по этому документу id. Вот почему мой componendDidMount является асинхронным, потому что яхочу подождать, пока я получу данные из коллекции ролей по идентификатору документа.

Помогите, пожалуйста, оптимизировать мой код)

class Agents extends Component {
  state = {
    isLoading: true,
    agents: [],
    showOptionsFor: null
  }

  async componentDidMount() {
    firebase
      .firestore()
      .collection('users')
      .orderBy('lastName')
      .onSnapshot(async snapshot => {
        let changes = snapshot.docChanges()

        let agents = this.state.agents
        for (const change of changes) {
          const agent = {
              id: change.doc.id,
              ...change.doc.data()
            }

          if (change.type === 'added' || change.type === 'modified') {
            await firebase
              .firestore()
              .collection('roles')
              .doc(change.doc.data().profile).get().then( response => {
                agent['role'] = response.data().profile
                agents.push(agent)
                }
              )
          }

          if (change.type === 'modified') {
            const newAgentsArray = agents.filter(element => {
              return element.id !== change.doc.id
            })
            agents = newAgentsArray

            agents.push(agent)
          }
      }

      this.setState({
        agents: agents,
        isLoading: false
      })
    })
  }