message: show header while columns are loading
diff: @@ -174,8 +174,9 @@ function Table(props: Props) {
  const onHeaderDrop = (dragged: any, target: any) => {
  tableActions.column.reorder(dragged, target);
  };
  + let columns = [];
  if (!tableState.loadingColumns) {
  - let columns = tableState.columns.map((column: any) => ({
  + columns = tableState.columns.map((column: any) => ({
  width: 220,
  draggable: true,
  editable: editable(column.type),
  @@ -224,6 +225,8 @@ function Table(props: Props) {
  </Confirmation>
  ),
  });
  + }
  +
  const tableHeight = size.height ? size.height - 110 : 500;
  const rowHeight = tableState.config.rowHeight;
  const rows = tableState.rows.map((row: any) => ({ rowHeight, ...row }));
  @@ -240,6 +243,7 @@ function Table(props: Props) {
  />
  </Suspense>
  <Suspense fallback={<div>Loading table...</div>}>
  + {!tableState.loadingColumns ? (
  <DraggableContainer onHeaderDrop={onHeaderDrop}>
  <ReactDataGrid
  headerRowHeight={45}
  @@ -283,6 +287,9 @@ function Table(props: Props) {
  }}
  />
  </DraggableContainer>
  + ) : (
  + <p>fetching columns</p>
  + )}
  <ColumnEditor
  handleClose={handleCloseHeader}
  @@ -295,7 +302,6 @@ function Table(props: Props) {
  </Suspense>
  </>
  );
  - } else return <p>fetching columns</p>;
  }
  export default Table;
  