feat: position Table loader below header (#1436)

VenusProtocol · Sep 15, 2023 · 0358a4d · 0358a4d
1 parent 2b1f9eb
commit 0358a4d
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 3 deletions.
diff --git a/src/components/Table/index.tsx b/src/components/Table/index.tsx
@@ -62,8 +62,6 @@ export function Table<R>({
     <Paper css={styles.getRoot({ breakpoint })} className={className}>
       {title && <h4 css={styles.getTitle({ breakpoint })}>{title}</h4>}
 
-      {isFetching && <Spinner css={styles.loader} />}
-
       <MuiTableContainer css={styles.getTableContainer({ breakpoint })}>
         <MuiTable css={styles.table({ minWidth: minWidth ?? '0' })} aria-label={title}>
           <Head
@@ -73,6 +71,16 @@ export function Table<R>({
             onRequestOrder={onRequestOrder}
           />
 
+          {isFetching && (
+            <tbody>
+              <tr>
+                <td colSpan={columns.length}>
+                  <Spinner css={styles.loader} />
+                </td>
+              </tr>
+            </tbody>
+          )}
+
           <MuiTableBody>
             {sortedData.map((row, rowIndex) => {
               const rowKey = rowKeyExtractor(row);

diff --git a/src/components/Table/styles.ts b/src/components/Table/styles.ts
@@ -110,7 +110,7 @@ export const useStyles = () => {
       color: ${theme.palette.text.primary};
     `,
     loader: css`
-      margin-bottom: ${theme.spacing(6)};
+      margin-bottom: ${theme.spacing(5)};
     `,
     table: ({ minWidth }: { minWidth: string }) => css`
       min-width: ${minWidth};