React-table/React-virtual skeleton when row is being prepared

[chrisfernandes102]

I have a project where I am attempting to render virtual rows in a table. When the virtual row is waiting to render I would love to render a skeleton row. Is there any way to achieve this? My hunch is that prepareRow is what is taking time to render the row, but still not 100% sure.

My code looks like this:

        <Box as="tbody" {...getTableBodyProps()}>
          {rows.map((row) => {
            const rowIndex = row.index
            const baseRow = baseRows[rowIndex]
            prepareRow(baseRow)
            return (
              <BodyRow row={baseRow}>
                {baseRow.cells.map((cell: ITableCell, cellIndex: number) => (
                  <BodyCell
                    className="body-cell"
                    cell={cell}
                  />
                ))}
              </BodyRow>
            )
          })}
        </Box>