Release to Production

src/hooks/useReports.ts

@@ -25,10 +25,10 @@ const useReports = (ownerId?: string, gateway?: AoGateway) => {
     queryFn: async ({ pageParam }) => {
       if (
         !arIOReadSDK ||
-        !startEpoch ||
+        startEpoch === undefined ||
         !gatewayStart ||
         !observerAddress ||
-        !pageParam
+        pageParam === undefined
       ) {
         throw new Error(
           'arIOReadSDK, startEpoch, ownerId, observerAddress, or gatewayStart not available',
@@ -52,7 +52,7 @@ const useReports = (ownerId?: string, gateway?: AoGateway) => {
         epochIndexToFetch -= windowSize;
 
         const epochs = await Promise.all(
-          batchedEpochIndicies.map((epochIndex) =>
+          batchedEpochIndicies.filter(v => v >= 0).map((epochIndex) =>
             arIOReadSDK.getEpoch({ epochIndex }),
           ),
         );
@@ -110,15 +110,15 @@ const useReports = (ownerId?: string, gateway?: AoGateway) => {
                 ),
                 size: parseInt(transaction.node.data.size),
                 version:
-                  tags.find((tag) => tag.name === 'App-Version')?.value || '',
+                  tags.find((tag) => tag.name === 'AR-IO-Observer-Report-Version')?.value || '',
               };
             },
           );
 
           data = data.concat(recordData);
         }
 
-        if (filtered.length < windowSize) {
+        if (filtered.length < windowSize || epochIndexToFetch < 0) {
           completed = true;
           break;
         }

src/pages/Reports/ReportsTable.tsx

@@ -1,4 +1,5 @@
 import { AoGateway } from '@ar.io/sdk';
+import Placeholder from '@src/components/Placeholder';
 import TableView from '@src/components/TableView';
 import useReports, { ReportTransactionData } from '@src/hooks/useReports';
 import { formatDate } from '@src/utils';
@@ -21,6 +22,7 @@ const ReportsTable = ({
     data: reports,
     hasNextPage,
     fetchNextPage,
+    isFetchingNextPage
   } = useReports(ownerId, gateway);
 
   // Define columns for the table
@@ -34,7 +36,7 @@ const ReportsTable = ({
       id: 'generatedAt',
       header: 'Generated At',
       sortDescFirst: false,
-      cell: ({row}) => formatDate(new Date(row.original.timestamp)),
+      cell: ({ row }) => formatDate(new Date(row.original.timestamp)),
     }),
     columnHelper.accessor('size', {
       id: 'size',
@@ -68,13 +70,19 @@ const ReportsTable = ({
         data={data || []}
         isLoading={isLoading}
         noDataFoundText="No reports found."
-        defaultSortingState={{ id: 'timestamp', desc: true }}
+        defaultSortingState={{ id: 'generatedAt', desc: true }}
         onRowClick={(row) => {
           navigate(`/gateways/${ownerId}/reports/${row.txid}`);
         }}
       />
       {hasNextPage && (
-        <button onClick={() => fetchNextPage()}>Load More</button>
+        <div className="flex w-full items-center justify-center border border-grey-600 py-[0.9375rem] pl-6 pr-[0.8125rem]">
+          {isLoading || isFetchingNextPage ? (
+            <Placeholder className='grow'/>
+          ) : (
+            <button onClick={() => fetchNextPage()}>Load More</button>
+          )}
+        </div>
       )}
     </div>
   );

src/pages/Reports/index.tsx

@@ -1,8 +1,8 @@
 import useGateway from '@src/hooks/useGateway';
+import { useGlobalState } from '@src/store';
 import { useParams } from 'react-router-dom';
 import ReportsHeader from './ReportsHeader';
 import ReportsTable from './ReportsTable';
-import { useGlobalState } from '@src/store';
 
 const Reports = () => {
   const params = useParams();
@@ -15,11 +15,9 @@ const Reports = () => {
   const currentEpoch = useGlobalState((state) => state.currentEpoch);
 
   return (
-    <div className="flex h-screen max-w-full flex-col gap-6 overflow-auto pr-6 scrollbar">
+    <div className="flex h-screen max-w-full flex-col gap-6 overflow-auto pb-6 pr-6 scrollbar">
       <ReportsHeader gateway={gateway} />
-      {isLoading || !currentEpoch ? (
-        undefined
-      ) : ownerId && gateway ? (
+      {isLoading || !currentEpoch ? undefined : ownerId && gateway ? (
         <ReportsTable ownerId={ownerId} gateway={gateway} />
       ) : (
         <div>Unable to find gateway with owner ID {ownerId}.</div>