diff --git a/src/app/components/Table/PaginationEngine.ts b/src/app/components/Table/PaginationEngine.ts index 257c8ea535..1ae3febae2 100644 --- a/src/app/components/Table/PaginationEngine.ts +++ b/src/app/components/Table/PaginationEngine.ts @@ -20,6 +20,11 @@ export interface PaginatedResults { * 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 { /** * 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 + getResults: ( + isLoading: boolean, + queryResult: QueryResult | undefined, + key?: keyof QueryResult, + ) => PaginatedResults } diff --git a/src/app/components/Table/useClientSidePagination.ts b/src/app/components/Table/useClientSidePagination.ts index 62b7273303..beee5dd7b2 100644 --- a/src/app/components/Table/useClientSidePagination.ts +++ b/src/app/components/Table/useClientSidePagination.ts @@ -24,9 +24,11 @@ type ClientSizePaginationParams = { 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({ paramName, clientPageSize, serverPageSize, - filter, + transform, }: ClientSizePaginationParams): ComprehensivePaginationEngine { const [searchParams] = useSearchParams() const selectedClientPageString = searchParams.get(paramName) @@ -90,15 +92,15 @@ export function useClientSidePagination({ 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) // 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({ return { tablePaginationProps: tableProps, data: dataWindow, + isLoading, } }, } diff --git a/src/app/components/Table/useComprehensiveSearchParamsPagination.ts b/src/app/components/Table/useComprehensiveSearchParamsPagination.ts index 0d419164ef..d2e384d00f 100644 --- a/src/app/components/Table/useComprehensiveSearchParamsPagination.ts +++ b/src/app/components/Table/useComprehensiveSearchParamsPagination.ts @@ -66,7 +66,7 @@ export function useComprehensiveSearchParamsPagination { + getResults: (isLoading, queryResult, key) => { const data = queryResult ? key ? (queryResult[key] as Item[]) @@ -83,6 +83,7 @@ export function useComprehensiveSearchParamsPagination 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), } }