Show skeleton on Spacewalk transactions page

.gitignore

@@ -35,4 +35,6 @@ dist-ssr
 !.yarn/versions
 
 vite.config.ts.timestamp-*
-coverage/
+coverage/
+# Local Netlify folder
+.netlify

src/components/Table/index.tsx

@@ -59,7 +59,6 @@ export type TableProps<T> = {
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const defaultData: any[] = [];
-const loading = <>{repeat(<Skeleton className="h-8 mb-2" />, 6)}</>;
 
 const Table = <T,>({
   data = defaultData,
@@ -77,6 +76,20 @@ const Table = <T,>({
 }: TableProps<T>): JSX.Element | null => {
   const totalCount = data.length;
 
+  const showSkeleton = useMemo(() => {
+    return isLoading && data.length === 0;
+  }, [data.length, isLoading]);
+
+  const tableData = useMemo(() => {
+    return showSkeleton ? Array(8).fill({}) : data;
+  }, [showSkeleton, data]);
+
+  const tableColumns = useMemo(() => {
+    return showSkeleton
+      ? columns.map((column) => ({ ...column, cell: () => <Skeleton className="mb-2 h-8" /> }))
+      : columns;
+  }, [showSkeleton, columns]);
+
   const initialSort = useMemo(() => {
     return sortBy
       ? Object.keys(sortBy).map((columnName) => ({ id: columnName, desc: sortBy[columnName] === SortingOrder.DESC }))
@@ -85,8 +98,8 @@ const Table = <T,>({
 
   const { getHeaderGroups, getRowModel, getPageCount, nextPage, previousPage, setGlobalFilter, getState } =
     useReactTable({
-      columns,
-      data,
+      columns: tableColumns,
+      data: tableData,
       initialState: {
         pagination: {
           pageSize: ps,
@@ -105,47 +118,46 @@ const Table = <T,>({
     globalFilter,
   } = getState();
 
-  if (isLoading) return loading;
   return (
     <>
       {search ? (
-        <div className="flex flex-wrap flex-row gap-2 mb-2">
+        <div className="mb-2 flex flex-row flex-wrap gap-2">
           <div className="ml-auto">
             <GlobalFilter globalFilter={globalFilter} setGlobalFilter={setGlobalFilter} />
           </div>
         </div>
       ) : null}
       <div
-        className={`table-container bg-base-200 table-border rounded-lg overflow-x-auto border border-base-300 ${
+        className={`table-container table-border overflow-x-auto rounded-lg border border-base-300 bg-base-200 ${
           fontSize || 'text-sm'
         } font-semibold ${className})`}
       >
         {title && <div className="bg-base-200 px-4 py-6 text-lg">{title}</div>}
         <table className="table w-full">
           <thead>
             {getHeaderGroups().map((headerGroup) => (
-              <tr key={headerGroup.id} className="border-b table-border">
+              <tr key={headerGroup.id} className="table-border border-b">
                 {headerGroup.headers.map((header) => {
                   const isSortable = header.column.getCanSort();
                   return (
                     <th
                       key={header.id}
                       colSpan={header.colSpan}
-                      className={`${isSortable ? ' cursor-pointer' : ''}`}
+                      className={`${isSortable ? 'cursor-pointer' : ''}`}
                       onClick={header.column.getToggleSortingHandler()}
                     >
                       <div
                         className={`flex flex-row items-center font-normal ${
                           fontSize || 'text-sm'
-                        } normal-case table-header ${header.column.columnDef.meta?.className || ''}`}
+                        } table-header normal-case ${header.column.columnDef.meta?.className || ''}`}
                       >
                         {flexRender(header.column.columnDef.header, header.getContext())}
                         {isSortable ? (
-                          <div className={`sort ${header.column.getIsSorted()} ml-2 mb-0.5`}>
+                          <div className={`sort ${header.column.getIsSorted()} mb-0.5 ml-2`}>
                             {header.column.getIsSorted() === 'desc' ? (
-                              <ChevronDownIcon className="w-3 h-3" stroke-width="2" />
+                              <ChevronDownIcon className="h-3 w-3" stroke-width="2" />
                             ) : (
-                              <ChevronUpIcon className="w-3 h-3" stroke-width="2" />
+                              <ChevronUpIcon className="h-3 w-3" stroke-width="2" />
                             )}
                           </div>
                         ) : null}
@@ -161,7 +173,7 @@ const Table = <T,>({
               <tr
                 key={row.id}
                 onClick={rowCallback ? () => rowCallback(row, index) : undefined}
-                className={rowCallback && 'cursor-pointer highlighted-row'}
+                className={rowCallback && 'highlighted-row cursor-pointer'}
               >
                 {row.getVisibleCells().map((cell) => {
                   return (
@@ -180,7 +192,7 @@ const Table = <T,>({
           </tbody>
         </table>
         <Pagination
-          className="justify-end text-neutral-400 normal-case font-normal text-sm mt-2 mb-2"
+          className="mb-2 mt-2 justify-end text-sm font-normal normal-case text-neutral-400"
           currentIndex={pageIndex}
           pageSize={pageSize}
           totalCount={totalCount}

src/pages/spacewalk/transactions/index.tsx

@@ -41,6 +41,7 @@ function Transactions(): JSX.Element {
   const [currentTransfer, setCurrentTransfer] = useState<TTransfer | undefined>();
   const [activeBlockNumber, setActiveBlockNumber] = useState<number>(0);
   const [data, setData] = useState<TTransfer[] | undefined>(undefined);
+  const [isLoading, setIsLoading] = useState<boolean>(true);
 
   useEffect(() => {
     let unsub: VoidFn = () => undefined;
@@ -52,6 +53,11 @@ function Transactions(): JSX.Element {
   }, [subscribeActiveBlockNumber]);
 
   useEffect(() => {
+    if (!walletAccount) {
+      console.log('Returning early because no wallet is connected');
+      return;
+    }
+
     const fetchAllEntries = async () => {
       const issueEntries = await getIssueRequests();
       const redeemEntries = await getRedeemRequests();
@@ -108,7 +114,16 @@ function Transactions(): JSX.Element {
 
       return entries;
     };
-    fetchAllEntries().then((res) => setData(res));
+
+    setIsLoading(true);
+    fetchAllEntries()
+      .then((res) => {
+        setData(res);
+      })
+      .catch(console.error)
+      .finally(() => {
+        setIsLoading(false);
+      });
   }, [activeBlockNumber, walletAccount, getIssueRequests, getRedeemRequests]);
 
   const columns = useMemo(() => {
@@ -138,7 +153,7 @@ function Transactions(): JSX.Element {
       <Table
         data={data}
         columns={columns}
-        isLoading={false}
+        isLoading={isLoading}
         search={false}
         pageSize={8}
         rowCallback={(row) => setCurrentTransfer(row.original)}
@@ -150,4 +165,5 @@ function Transactions(): JSX.Element {
     </div>
   );
 }
+
 export default Transactions;