How to update progress bar in async process?

[eugenevk]

I have a script that reads rows from a spreadsheet and loads them in a Firebase database and into an Algolia search index. This happens asynchronously. Only after a row has been saved to Firebase and Algolia, I want to update the Quasar progress bar. However, the progress bar shows immediately 100%, while the records are still being created in Firebase and Algolia. How can I update the progress bar only after a row has been saved to both Firebase and Algolia?

My import code:

const importData = async () => {
  try {
    const data = await readFileAsBinaryString(file.value)
    const workbook = read(data, { type: 'binary' })
    const sheets = workbook.Sheets

    // Process all Excel sheets
    for (const key in sheets) {
      const sheet = sheets[key]
      const rows = utils.sheet_to_json(sheet, { header: 1 })
      const columns = rows[0]
      const data = utils.sheet_to_json(sheet)
      const totalRecords = data.length
      const progressStep = 1 / totalRecords

      // Process all rows
      progress.value = 0

      for (let i = 0; i < totalRecords; i++) {
        const company = {}
        const record = data[i]

        // Process all fields
        for (let j = 0; j < columns.length; j++) {
          const column = columns[j]
          company[column] = record[column] !== undefined ? record[column] : null
        }

        // Add company to the database
        await addDocument('companies', companyIndex, company)

        progress.value += progressStep
        progress.value = Math.min(progress.value, 1)
      }

      numOfRecordsImported.value = totalRecords
    }
  } catch (err) {
    console.error(err)
  }
}

[eugenevk]

I solved it myself by adding an additional function for the database update. And the funny thing? I found the answer using the AI program ChatGPT!!!

My code now is as follows:

const updateDatabase = async company => {
  await addDocument('companies', companyIndex, company)
}

const importData = async () => {
  try {
    const data = await readFileAsBinaryString(file.value)
    const workbook = read(data, { type: 'binary' })
    const sheets = workbook.Sheets

    // Process all Excel sheets
    for (const key in sheets) {
      const sheet = sheets[key]
      const rows = utils.sheet_to_json(sheet, { header: 1 })
      const columns = rows[0]
      const data = utils.sheet_to_json(sheet)
      const totalRecords = data.length
      const progressStep = 1 / totalRecords

      // Process all rows
      progress.value = 0

      for (let i = 0; i < totalRecords; i++) {
        const company = {}
        const record = data[i]

        // Process all fields
        for (let j = 0; j < columns.length; j++) {
          const column = columns[j]
          company[column] = record[column] !== undefined ? record[column] : null
        }

        // Add company to the database
        await updateDatabase(company)

        progress.value += progressStep
        progress.value = Math.min(progress.value, 1)
      }

      numOfRecordsImported.value = totalRecords
    }
  } catch (err) {
    console.error(err)
  }
}