fix(FR-1446): refactor useDeferredQueryParams

react/src/App.tsx

@@ -9,6 +9,7 @@ import MainLayout from './components/MainLayout/MainLayout';
 import WebUINavigate from './components/WebUINavigate';
 import { useSuspendedBackendaiClient } from './hooks';
 import { useBAISettingUserState } from './hooks/useBAISetting';
+import { PageQueryParamAtomProvider } from './hooks/useTransitionSafeQueryParams';
 // High priority to import the component
 import ComputeSessionListPage from './pages/ComputeSessionListPage';
 import ModelStoreListPage from './pages/ModelStoreListPage';
@@ -98,7 +99,9 @@ const router = createBrowserRouter([
     errorElement: <ErrorView />,
     element: (
       <QueryParamProvider adapter={ReactRouter6Adapter}>
-        <InteractiveLoginPage />
+        <PageQueryParamAtomProvider>
+          <InteractiveLoginPage />
+        </PageQueryParamAtomProvider>
       </QueryParamProvider>
     ),
   },
@@ -115,12 +118,14 @@ const router = createBrowserRouter([
           }
         }
       >
-        <MainLayout />
-        <RoutingEventHandler />
-        <Suspense fallback={null}>
-          <FolderExplorerOpener />
-          <FolderInvitationResponseModalOpener />
-        </Suspense>
+        <PageQueryParamAtomProvider>
+          <MainLayout />
+          <RoutingEventHandler />
+          <Suspense fallback={null}>
+            <FolderExplorerOpener />
+            <FolderInvitationResponseModalOpener />
+          </Suspense>
+        </PageQueryParamAtomProvider>
       </QueryParamProvider>
     ),
     children: [

react/src/components/AgentSummaryList.tsx

@@ -42,7 +42,7 @@ import React, {
 import { useTranslation } from 'react-i18next';
 import { graphql, FetchPolicy, useLazyLoadQuery } from 'react-relay';
 import { useBAISettingUserState } from 'src/hooks/useBAISetting';
-import { useDeferredQueryParams } from 'src/hooks/useDeferredQueryParams';
+import { useTransitionSafeQueryParams } from 'src/hooks/useTransitionSafeQueryParams';
 import { StringParam, withDefault } from 'use-query-params';
 
 type AgentSummary = NonNullable<
@@ -74,7 +74,7 @@ const AgentSummaryList: React.FC<AgentSummaryListProps> = ({
     pageSize: 20,
   });
 
-  const [queryParams, setQuery] = useDeferredQueryParams({
+  const [queryParams, setQuery] = useTransitionSafeQueryParams({
     order: withDefault(StringParam, undefined),
     filter: withDefault(StringParam, undefined),
     status: withDefault(StringParam, 'ALIVE'),

react/src/hooks/reactPaginationQueryOptions.tsx

@@ -1,6 +1,6 @@
 // import { offset_to_cursor } from "../helper";
 import { LazyLoadQueryOptions } from '../helper/types';
-import { useDeferredQueryParams } from './useDeferredQueryParams';
+import { useTransitionSafeQueryParams } from './useTransitionSafeQueryParams';
 import { SorterResult } from 'antd/lib/table/interface';
 import _ from 'lodash';
 import { useMemo, useState } from 'react';
@@ -342,7 +342,7 @@ export const useBAIPaginationOptionState = (
 export const useBAIPaginationOptionStateOnSearchParam = (
   initialOptions: InitialPaginationOption,
 ): BAIPaginationOptionState => {
-  const [options, setOptions] = useDeferredQueryParams({
+  const [options, setOptions] = useTransitionSafeQueryParams({
     current: NumberParam,
     pageSize: NumberParam,
   });