skeletons for watchlist txs

lib/api/resources.ts

@@ -191,7 +191,7 @@ export const RESOURCES = {
   },
   txs_watchlist: {
     path: '/api/v2/transactions/watchlist',
-    paginationFields: [ 'filter' as const, 'hash' as const, 'inserted_at' as const ],
+    paginationFields: [ 'block_number' as const, 'index' as const, 'items_count' as const ],
     filterFields: [ ],
   },
   tx: {

types/api/transaction.ts

@@ -74,9 +74,9 @@ export interface TransactionsResponsePending {
 export interface TransactionsResponseWatchlist {
   items: Array<Transaction>;
   next_page_params: {
-    inserted_at: string;
-    hash: string;
-    filter: 'pending';
+    block_number: number;
+    index: number;
+    items_count: 50;
   } | null;
 }
 

ui/pages/Transactions.tsx

@@ -44,6 +44,11 @@ const Transactions = () => {
     resourceName: 'txs_watchlist',
     options: {
       enabled: router.query.tab === 'watchlist',
+      placeholderData: generateListStub<'txs_watchlist'>(TX, 50, { next_page_params: {
+        block_number: 9005713,
+        index: 5,
+        items_count: 50,
+      } }),
     },
   });
 
@@ -82,7 +87,12 @@ const Transactions = () => {
       <RoutedTabs
         tabs={ tabs }
         tabListProps={ isMobile ? undefined : TAB_LIST_PROPS }
-        rightSlot={ <TxsTabSlot pagination={ txsQuery.pagination } isPaginationVisible={ txsQuery.isPaginationVisible && !isMobile }/> }
+        rightSlot={ (
+          <TxsTabSlot
+            pagination={ router.query.tab === 'watchlist' ? txsWatchlistQuery.pagination : txsQuery.pagination }
+            isPaginationVisible={ txsQuery.isPaginationVisible && !isMobile }
+          />
+        ) }
         stickyEnabled={ !isMobile }
       />
     </>

ui/txs/TxsContent.tsx

@@ -97,7 +97,6 @@ const TxsContent = ({
       setSorting={ setSortByValue }
       paginationProps={ query.pagination }
       showPagination={ query.isPaginationVisible }
-      isLoading={ query.pagination.isLoading }
       filterComponent={ filter }
       linkSlot={ currentAddress ?
         <AddressCsvExportLink address={ currentAddress } type="transactions" ml={ 2 } isLoading={ query.pagination.isLoading }/> : null

ui/txs/TxsHeaderMobile.tsx

@@ -28,10 +28,9 @@ type Props = {
   showPagination?: boolean;
   filterComponent?: React.ReactNode;
   linkSlot?: React.ReactNode;
-  isLoading?: boolean;
 }
 
-const TxsHeaderMobile = ({ filterComponent, sorting, setSorting, paginationProps, className, showPagination = true, linkSlot, isLoading }: Props) => {
+const TxsHeaderMobile = ({ filterComponent, sorting, setSorting, paginationProps, className, showPagination = true, linkSlot }: Props) => {
   return (
     <ActionBar className={ className }>
       <HStack>
@@ -40,7 +39,7 @@ const TxsHeaderMobile = ({ filterComponent, sorting, setSorting, paginationProps
           options={ SORT_OPTIONS }
           setSort={ setSorting }
           sort={ sorting }
-          isLoading={ isLoading }
+          isLoading={ paginationProps.isLoading }
         />
         { /* api is not implemented */ }
         { /* <FilterInput