UX Optimization: Replace debounce with prefetch additional page for consent registry

Author: rashmithachamikara

portal/frontend/src/__tests__/ConsentRegistryPage.test.tsx

@@ -268,6 +268,41 @@ describe('ConsentRegistryPage', () => {
     expect(String(requestUrl)).toContain('offset=25')
   })
 
+  it('prefetches exactly one next page when more consents are available', async () => {
+    vi.stubGlobal('fetch', fetchMock)
+    fetchMock.mockImplementation(async (input: RequestInfo | URL) => {
+      const url = new URL(String(input))
+      const offset = Number(url.searchParams.get('offset') ?? 0)
+
+      return {
+        ok: true,
+        status: 200,
+        json: async () => ({
+          data: [],
+          metadata: {
+            total: 25,
+            offset,
+            count: 0,
+            limit: 10,
+          },
+        }),
+      }
+    })
+
+    renderConsentRegistryPage(createQueryClient())
+
+    await waitFor(() => {
+      expect(fetchMock).toHaveBeenCalledTimes(2)
+    })
+
+    const requestedOffsets = fetchMock.mock.calls.map(([requestUrl]) => {
+      const url = new URL(String(requestUrl))
+      return Number(url.searchParams.get('offset'))
+    })
+
+    expect(requestedOffsets).toEqual([0, 10])
+  })
+
   it('maps URL filters to v0.3 consent search parameters', async () => {
     vi.stubGlobal('fetch', fetchMock)
     fetchMock.mockResolvedValue({

portal/frontend/src/features/consent-registry/ConsentRegistryPage.tsx

@@ -17,7 +17,7 @@
  */
 
 import { Box, Stack, Typography } from '@wso2/oxygen-ui'
-import { useEffect, useMemo, useState } from 'react'
+import { useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useSearchParams } from 'react-router-dom'
 import HeaderBreadcrumbs from '../../components/layout/main-layout/HeaderBreadcrumbs'
@@ -50,7 +50,6 @@ const FILTER_STATUS_VALUES: ConsentRegistryFiltersModel['status'][] = [
   'Expired',
 ]
 
-const TABLE_SKELETON_DEBOUNCE_MS = 200
 const DEFAULT_PAGE = 0
 const DEFAULT_ROWS_PER_PAGE = 10
 
@@ -134,36 +133,18 @@ function ConsentRegistryPage(): React.JSX.Element {
   const [selectedRevocationConsentID, setSelectedRevocationConsentID] = useState<string | null>(
     null,
   )
-  const [showTableSkeleton, setShowTableSkeleton] = useState<boolean>(false)
-
   const filters = useMemo(() => getFiltersFromSearchParams(searchParams), [searchParams])
   const page = useMemo(() => getPageFromSearchParams(searchParams), [searchParams])
   const rowsPerPage = useMemo(() => getRowsPerPageFromSearchParams(searchParams), [searchParams])
   const consentListQuery = useConsentListQuery(filters, page, rowsPerPage)
   const selectedApprovalConsentQuery = useConsentDetailQuery(selectedApprovalConsentID ?? undefined)
   const approveMutation = useApproveConsentMutation()
   const revokeMutation = useRevokeConsentMutation()
-  const isTableFetching = consentListQuery.isFetching
+  const isTableLoading = consentListQuery.isPending || consentListQuery.isPlaceholderData
 
   const rows = consentListQuery.data?.rows ?? []
   const totalCount = consentListQuery.data?.total ?? 0
 
-  useEffect(() => {
-    let debounceDelay = 0
-
-    if (!consentListQuery.isLoading && isTableFetching) {
-      debounceDelay = TABLE_SKELETON_DEBOUNCE_MS
-    }
-
-    const skeletonTimer = window.setTimeout(() => {
-      setShowTableSkeleton(isTableFetching)
-    }, debounceDelay)
-
-    return () => {
-      window.clearTimeout(skeletonTimer)
-    }
-  }, [consentListQuery.isLoading, isTableFetching])
-
   return (
     <Box component="main" sx={{ p: { xs: 2, md: 4 } }}>
       <Stack spacing={3}>
@@ -190,11 +171,11 @@ function ConsentRegistryPage(): React.JSX.Element {
           <Typography color="error.main">{t('consentRegistry.messages.loadFailed')}</Typography>
         ) : null}
 
-        {!consentListQuery.isError && (rows.length > 0 || isTableFetching) ? (
+        {!consentListQuery.isError && (rows.length > 0 || isTableLoading) ? (
           <ConsentRegistryTable
             rows={rows}
             totalCount={totalCount}
-            isLoading={isTableFetching && showTableSkeleton}
+            isLoading={isTableLoading}
             page={page}
             rowsPerPage={rowsPerPage}
             onPageChange={(nextPage) => {
@@ -217,7 +198,7 @@ function ConsentRegistryPage(): React.JSX.Element {
           />
         ) : null}
 
-        {!isTableFetching && !consentListQuery.isError && rows.length === 0 ? (
+        {!isTableLoading && !consentListQuery.isError && rows.length === 0 ? (
           <Typography>{t('consentRegistry.messages.empty')}</Typography>
         ) : null}
 

portal/frontend/src/features/consent-registry/hooks/useConsentQueries.ts

@@ -18,12 +18,14 @@
 
 import {
   keepPreviousData,
+  queryOptions,
   type UseMutationResult,
   type UseQueryResult,
   useMutation,
   useQuery,
   useQueryClient,
 } from '@tanstack/react-query'
+import { useEffect } from 'react'
 import {
   approveMyConsent,
   fetchMyConsentByID,
@@ -102,14 +104,14 @@ function toConsentRow(consent: ConsentDetailAPI): ConsentRecord {
   }
 }
 
-export function useConsentListQuery(
+function consentListQueryOptions(
   filters: ConsentRegistryFilters,
   page: number,
   rowsPerPage: number,
-): UseQueryResult<ConsentListResult> {
+) {
   const params = toListParams(filters, page, rowsPerPage)
 
-  return useQuery<ConsentListResult>({
+  return queryOptions({
     queryKey: ['consents', params],
     queryFn: async (): Promise<ConsentListResult> => {
       const response = await fetchMyConsents(params)
@@ -122,6 +124,28 @@ export function useConsentListQuery(
   })
 }
 
+export function useConsentListQuery(
+  filters: ConsentRegistryFilters,
+  page: number,
+  rowsPerPage: number,
+): UseQueryResult<ConsentListResult> {
+  const queryClient = useQueryClient()
+  const query = useQuery(consentListQueryOptions(filters, page, rowsPerPage))
+
+  useEffect(() => {
+    const nextPage = page + 1
+    const hasNextPage = nextPage * rowsPerPage < (query.data?.total ?? 0)
+
+    if (!query.isPlaceholderData && hasNextPage) {
+      queryClient
+        .prefetchQuery(consentListQueryOptions(filters, nextPage, rowsPerPage))
+        .catch(() => undefined)
+    }
+  }, [filters, page, query.data?.total, query.isPlaceholderData, queryClient, rowsPerPage])
+
+  return query
+}
+
 export function useConsentDetailQuery(
   consentID: string | undefined,
 ): UseQueryResult<ConsentDetailAPI> {

portal/frontend/src/utils/queryClient.ts

@@ -18,7 +18,7 @@
 
 import { QueryClient } from '@tanstack/react-query'
 
-const STALE_TIME_IN_MS = 1 * 60 * 1000
+const STALE_TIME_IN_MS = 0.5 * 60 * 1000
 
 const queryClient = new QueryClient({
   defaultOptions: {