Tweak pagination engine

Provide more features for transforming the data,
and channel through loading status

src/app/components/Table/PaginationEngine.ts

@@ -20,6 +20,11 @@ export interface PaginatedResults<Item> {
    * The data provided to the data consumer in the current window
    */
   data: Item[] | undefined
+
+  /**
+   * Is the data set still loading from the server?
+   */
+  isLoading: boolean
 }
 
 /**
@@ -41,8 +46,13 @@ export interface ComprehensivePaginationEngine<Item, QueryResult extends List> {
   /**
    * Get the current data/state info for the data consumer component.
    *
+   * @param isLoading Is the data still being loaded from the server?
    * @param queryResult the data coming in the server, requested according to this engine's specs, including metadata
    * @param key The field where the actual records can be found within queryResults
    */
-  getResults: (queryResult: QueryResult | undefined, key?: keyof QueryResult) => PaginatedResults<Item>
+  getResults: (
+    isLoading: boolean,
+    queryResult: QueryResult | undefined,
+    key?: keyof QueryResult,
+  ) => PaginatedResults<Item>
 }

src/app/components/Table/useClientSidePagination.ts

@@ -24,9 +24,11 @@ type ClientSizePaginationParams<Item> = {
   serverPageSize: number
 
   /**
-   * Filtering to be applied after loading the data from the server, before presenting it to the data consumer component
+   * Transformation to be applied after loading the data from the server, before presenting it to the data consumer component
+   *
+   * Can be used for filtering, ordering, etc
    */
-  filter?: (item: Item) => boolean
+  transform?: (input: Item[]) => Item[]
 }
 
 const knownListKeys: string[] = ['total_count', 'is_total_count_clipped']
@@ -52,7 +54,7 @@ export function useClientSidePagination<Item, QueryResult extends List>({
   paramName,
   clientPageSize,
   serverPageSize,
-  filter,
+  transform,
 }: ClientSizePaginationParams<Item>): ComprehensivePaginationEngine<Item, QueryResult> {
   const [searchParams] = useSearchParams()
   const selectedClientPageString = searchParams.get(paramName)
@@ -90,15 +92,15 @@ export function useClientSidePagination<Item, QueryResult extends List>({
   return {
     selectedPageForClient: selectedClientPage,
     paramsForServer: paramsForQuery,
-    getResults: (queryResult, key) => {
+    getResults: (isLoading, queryResult, key) => {
       const data = queryResult // we want to get list of items out from the incoming results
         ? key // do we know where (in which field) to look?
           ? (queryResult[key] as Item[]) // If yes, just get out the data
           : findListIn<QueryResult, Item>(queryResult) // If no, we will try to guess
         : undefined
 
-      // Apply the specified client-side filtering
-      const filteredData = !!data && !!filter ? data.filter(filter) : data
+      // Apply the specified client-side transformation
+      const filteredData = !!data && !!transform ? transform(data) : data
 
       // The data window from the POV of the data consumer component
       const offset = (selectedClientPage - 1) * clientPageSize
@@ -121,6 +123,7 @@ export function useClientSidePagination<Item, QueryResult extends List>({
       return {
         tablePaginationProps: tableProps,
         data: dataWindow,
+        isLoading,
       }
     },
   }

src/app/components/Table/useComprehensiveSearchParamsPagination.ts

@@ -66,7 +66,7 @@ export function useComprehensiveSearchParamsPagination<Item, QueryResult extends
   return {
     selectedPageForClient: selectedPage,
     paramsForServer: paramsForQuery,
-    getResults: (queryResult, key) => {
+    getResults: (isLoading, queryResult, key) => {
       const data = queryResult
         ? key
           ? (queryResult[key] as Item[])
@@ -83,6 +83,7 @@ export function useComprehensiveSearchParamsPagination<Item, QueryResult extends
       return {
         tablePaginationProps: tableProps,
         data: filteredData,
+        isLoading,
       }
     },
     // tableProps,

src/app/pages/TokenDashboardPage/hook.ts

@@ -87,7 +87,7 @@ export const _useTokenTransfers = (scope: SearchScope, params: undefined | GetRu
 
   const { isFetched, isLoading, data } = query
 
-  const results = pagination.getResults(data?.data)
+  const results = pagination.getResults(isLoading, data?.data)
 
   if (isFetched && pagination.selectedPageForClient > 1 && !results.data?.length) {
     throw AppErrors.PageDoesNotExist
@@ -96,7 +96,7 @@ export const _useTokenTransfers = (scope: SearchScope, params: undefined | GetRu
   return {
     isLoading,
     isFetched,
-    results: pagination.getResults(data?.data),
+    results: pagination.getResults(isLoading, data?.data),
   }
 }