Решено: пользовательский интерфейс React Material отображает прогресс в таблице при ожидании данных

Question

Я знаю, что можно показать Циркулярный прогресс по таблице, которая еще не заполнена. Как вы это делаете?

В нынешнем виде в таблице написано Нет записей для отображения .... до тех пор, пока сервер не вернется с данными.

========= в дополнение к ответу @torquan это то, что сработало для меня более подробно.

const [dataFetched, setDataFetched] = useState(false)

Конвертировать EmployeesTable в компонент - тогда мне пришлось передать реквизит, и он отлично работает.

         {!dataFetched ? (
            <CircularProgress />
         ) : (
            <EmployeesTable
               data={employees}
               token={token}
            />
         )}

Answer 1

Вы можете отображать счетчик, пока данные не будут извлечены.

Эта часть может выглядеть следующим образом:

<table>
  {!dataFetched ? <Spinner /> : <YourTableBody>}
</table>

Вы можете использовать <Spinner /> из одной из библиотек npm, например, или напишите свой собственный.

Вы бы инициализировали dataFetched как false и установили бы его в true, когда ваш вызов API завершится. Если это слишком общее, вы должны опубликовать свой код для таблицы.