From 7dfabb1e7fe1e57ad953ee2df41287b58d762a80 Mon Sep 17 00:00:00 2001
From: Kristof Csillag <kristof@oasisprotocol.org>
Date: Thu, 23 Jan 2025 00:25:53 +0100
Subject: [PATCH] Simplify table

---
 src/app/components/Table/index.tsx | 98 ++++++++++++++----------------
 1 file changed, 47 insertions(+), 51 deletions(-)

diff --git a/src/app/components/Table/index.tsx b/src/app/components/Table/index.tsx
index 7299b4b71..1b9512810 100644
--- a/src/app/components/Table/index.tsx
+++ b/src/app/components/Table/index.tsx
@@ -113,73 +113,69 @@ export const Table: FC<TableProps> = ({
 }) => {
   const { isMobile } = useScreenSize()
 
-  const isEmpty = !isLoading && !rows?.length
-
-  if (isEmpty && !emptyMessage) {
-    return null
-  }
-
-  return (
+  return !isLoading && !rows?.length ? ( // This is known to be empty
+    emptyMessage ? ( // If we have a message, show it
+      <CardEmptyState label={emptyMessage} />
+    ) : null // otherwise just show nothing
+  ) : (
     <>
-      {!isEmpty && (
-        <TableContainer>
-          <MuiTable aria-label={name}>
-            <TableHead>
-              <TableRow>
-                {columns.map((column, index) => {
-                  if (column.hide) {
+      <TableContainer>
+        <MuiTable aria-label={name}>
+          <TableHead>
+            <TableRow>
+              {columns.map((column, index) => {
+                if (column.hide) {
+                  return null
+                }
+                return (
+                  <TableCell
+                    key={column.key}
+                    align={column.align}
+                    sx={{
+                      width: column.width || 'auto',
+                      ...(stickyColumn && !index && isMobile ? stickyColumnStyles : {}),
+                    }}
+                  >
+                    {column.content}
+                  </TableCell>
+                )
+              })}
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {(alwaysWaitWhileLoading || !rows) && isLoading && (
+              <SkeletonTableRows rowsNumber={rowsNumber} columnsNumber={columns.length} />
+            )}
+            {rows?.map(row => (
+              <StyledTableRow key={row.key} highlight={row.highlight}>
+                {row.data.map((cell, index) => {
+                  if (cell.hide) {
                     return null
                   }
                   return (
                     <TableCell
-                      key={column.key}
-                      align={column.align}
+                      key={cell.key}
+                      align={cell.align}
                       sx={{
-                        width: column.width || 'auto',
                         ...(stickyColumn && !index && isMobile ? stickyColumnStyles : {}),
+                        ...(extraHorizontalSpaceOnMobile && isMobile ? extraHorizontalPaddingStyles : {}),
                       }}
                     >
-                      {column.content}
+                      {cell.content}
                     </TableCell>
                   )
                 })}
-              </TableRow>
-            </TableHead>
-            <TableBody>
-              {(alwaysWaitWhileLoading || !rows) && isLoading && (
-                <SkeletonTableRows rowsNumber={rowsNumber} columnsNumber={columns.length} />
-              )}
-              {rows?.map(row => (
-                <StyledTableRow key={row.key} highlight={row.highlight}>
-                  {row.data.map((cell, index) => {
-                    if (cell.hide) {
-                      return null
-                    }
-                    return (
-                      <TableCell
-                        key={cell.key}
-                        align={cell.align}
-                        sx={{
-                          ...(stickyColumn && !index && isMobile ? stickyColumnStyles : {}),
-                          ...(extraHorizontalSpaceOnMobile && isMobile ? extraHorizontalPaddingStyles : {}),
-                        }}
-                      >
-                        {cell.content}
-                      </TableCell>
-                    )
-                  })}
-                </StyledTableRow>
-              ))}
-            </TableBody>
-          </MuiTable>
-        </TableContainer>
-      )}
-      {!isEmpty && pagination && (
+              </StyledTableRow>
+            ))}
+          </TableBody>
+        </MuiTable>
+      </TableContainer>
+
+      {pagination && (
         <Box sx={{ display: 'flex', justifyContent: 'center' }}>
           <TablePagination {...pagination} />
         </Box>
       )}
-      {isEmpty && emptyMessage && <CardEmptyState label={emptyMessage} />}
     </>
   )
 }