Estoy configurando un componente de tabla, y quiero que tenga un renderizado de componente de brillo de carga de tabla si los datos aún se están cargando.

Ahora estoy pasando los datos al componente de la tabla y cargándolos en un enlace personalizado del paquete React Table. La cuestión es que, cuando los datos van allí y no se han cargado, aparece un error. Esto se debe a que los datos se repiten para representarlos.

Por lo tanto, quiero que los datos no se repitan todavía o que tengan algún tipo de argumento predeterminado.

Intenté agregar una matriz predeterminada con un objeto vacío, pero luego aparece el mismo error.

Podría hacer que el componente que llama a la tabla lo represente condicionalmente, pero creo que sería bueno que la tabla pudiera hacerlo.

Mi componente de tabla:

 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;

¿Alguien sabe cómo puedo hacer esto?