I'm setting up a table component, and I want it to have a table loading shimmer component render if the data is still loading.

Now I'm passing the data to the table component, and loading it in a custom hook from React Table package. The thing is, when the data goes there and the data hasn't been loaded I get an error. That's because the data is being looped over to render it.

So I want the data to either not be looped over yet, or have some kind of default argument.

I've tried to add a default array with an empty object in it, but then I get the same error.

I could have the component which calls the table render it conditionally, but I think it would be nice to make the table be able to do it.

My table component:

const Table = ({ headerTxt, columns, data, isLoading }) => {
  const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } =
    useTable({
      columns,
      data,
    });

  return (
    <Wrapper>
      <Header>
        <h6>{headerTxt}</h6>
      </Header>
      {isLoading ? (
        <>Loading component goes here</>
      ) : (
        <table {...getTableProps()}>
          <thead>
            {headerGroups.map((headerGroup) => (
              <tr {...headerGroup.getHeaderGroupProps()}>
                {headerGroup.headers.map((column) => (
                  <th {...column.getHeaderProps()}>
                    {column.render("Header")}
                  </th>
                ))}
              </tr>
            ))}
          </thead>
          <tbody {...getTableBodyProps()}>
            {rows.map((row, i) => {
              prepareRow(row);
              return (
                <tr {...row.getRowProps()}>
                  {row.cells.map((cell) => {
                    return (
                      <td {...cell.getCellProps()}>{cell.render("Cell")}</td>
                    );
                  })}
                </tr>
              );
            })}
          </tbody>
        </table>
      )}
    </Wrapper>
  );
};

export default Table;

Does someone know how I can do this?