Enable react router v7_startTransition #1259

cypress/e2e/with_mock_data/systems.cy.ts

@@ -129,7 +129,7 @@
     cy.location('search').should('eq', '');
   });
 
-  it('should be able to navigate through subsystems while preserving the table states when going back', () => {
+  it.only('should be able to navigate through subsystems while preserving the table states when going back', () => {
     cy.visit('/systems/65328f34a40ff5301575a4e3');
 
     cy.findByText('Smaller laser').should('be.visible');

package.json

@@ -58,9 +58,9 @@
     "preview:build:dev": "yarn build --watch & yarn preview",
     "test": "vitest --coverage",
     "lint": "eslint --max-warnings=0 --fix ./src ./cypress && tsc --noEmit && tsc --noEmit -p cypress/tsconfig.json",
-    "build:e2e": "cross-env VITE_APP_BUILD_STANDALONE=true VITE_APP_INCLUDE_MSW=true GENERATE_SOURCEMAP=false yarn build",
+    "build:e2e": "cross-env VITE_APP_BUILD_STANDALONE=true VITE_APP_INCLUDE_MSW=true GENERATE_SOURCEMAP=false yarn build --watch",
     "build:e2e:api": "cross-env VITE_APP_BUILD_STANDALONE=true VITE_APP_INCLUDE_MSW=false GENERATE_SOURCEMAP=false yarn build",
-    "e2e:serve": "yarn build:e2e && node ./server/e2e-test-server.js",
+    "e2e:serve": "yarn build:e2e & node ./server/e2e-test-server.js",
     "e2e:serve:api": "yarn build:e2e:api && node ./server/e2e-test-server.js",
     "e2e:interactive": "start-server-and-test e2e:serve http://localhost:3000 cy:open",
     "e2e:interactive:api": "start-server-and-test e2e:serve:api http://localhost:3000 cy:open",

src/App.tsx

@@ -272,8 +272,7 @@ export default function App() {
     <RouterProvider
       router={router}
       future={{
-        // Disabled for now and will be addressed in #1259
-        v7_startTransition: false,
+        v7_startTransition: true,
       }}
     />
   );

src/common/preservedTableState.component.tsx

@@ -185,18 +185,29 @@
   // Keeps track of the last location state update to occur (for detecting browser changes e.g. back button being clicked)
   const lastLocationUpdate = useRef(location);
 
+  const searchParamsFromWindow = new URLSearchParams(window.location.search);
   const urlParamName = props?.urlParamName || 'state';
+  const log = (value: unknown) => console.log(value + `[${urlParamName}]`);
   const compressedState = props?.storeInUrl
-    ? searchParams.get(urlParamName)
+    ? searchParamsFromWindow.get(urlParamName)
     : null;
   const unparsedState = decompressState(compressedState);
 
   const [parsedState, setParsedState] = useState<StatePartial>(
     getParsedState(unparsedState)
   );
+  log('---------- NEW RENDER ---------');
+  log('Search params: ' + searchParams.toString());
+  log('Search params 2: ' + searchParamsFromWindow.toString());
+  log(window.location.search);
+  log('Unparsed state ' + unparsedState + ' (render)');
+  log('Parsed state ' + Object.entries(parsedState) + ' (render)');
 
   // Update the search params only if necessary
   useEffect(() => {
+    log('HERE');
+    log(window.location.search);
+    log(location.search);
     if (props?.storeInUrl) {
       // Get the expected unparsed state in the URL for the current internal state
       const parsedStateSearchParams = convertInternalState(parsedState);
@@ -212,14 +223,48 @@
         ) {
           // Clear search params if state is no longer needed
           if (newUnparsedState !== '{}') {
-            searchParams.set(
+            log('Updating search params (useEffect)');
+            log('New state: ' + newUnparsedState);
+            log('Existing search params: ' + searchParamsFromWindow.toString());
+            searchParamsFromWindow.set(
               urlParamName,
               LZString.compressToEncodedURIComponent(newUnparsedState)
             );
-            setSearchParams(searchParams, { replace: false });
+            log('New search params: ' + searchParamsFromWindow.toString());
+            setSearchParams(searchParamsFromWindow, { replace: false });
+
+            // setSearchParams(
+            //   (prev) => {
+            //     console.log(prev.entries());
+            //     const next = new URLSearchParams(
+            //       Object.fromEntries(prev.entries())
+            //     );
+            //     console.log(next.entries());
+            //     next.set(
+            //       urlParamName,
+            //       LZString.compressToEncodedURIComponent(newUnparsedState)
+            //     );
+            //     console.log(newUnparsedState);
+            //     console.log(next.toString());
+            //     return next;
+            //   },
+            //   { replace: false }
+            // );
           } else {
+            log('Clearing search params (useEffect)');
             searchParams.delete(urlParamName);
             setSearchParams(searchParams, { replace: false });
+
+            // setSearchParams(
+            //   (prev) => {
+            //     const next = new URLSearchParams(
+            //       Object.fromEntries(prev.entries())
+            //     );
+            //     next.delete(urlParamName);
+            //     return next;
+            //   },
+            //   { replace: false }
+            // );
           }
         } else {
           // Update the internal state to reflect the browser level change
@@ -229,17 +274,21 @@
           if (lastLocationUpdate.current.pathname !== location.pathname)
             firstUpdate.current.p = undefined;
 
+          log(
+            'Updating internal state to reflect browser level change (useEffect)'
+          );
+
           setParsedState(getParsedState(unparsedState));
         }
       }
 
       lastLocationUpdate.current = location;
     }
   }, [
     location,
     parsedState,
     props?.storeInUrl,
-    searchParams,
+    searchParamsFromWindow,
     setSearchParams,
     unparsedState,
     urlParamName,
@@ -540,6 +589,12 @@
           updaterOrValue,
           prevState.p || defaultState.p
         );
+        log(
+          'Updating internal params: ' +
+            newValue.pageIndex +
+            ' ' +
+            newValue.pageSize
+        );
         return {
           ...prevState,
           p:
@@ -549,7 +604,7 @@
         };
       });
     },
     [defaultState.p, props?.paginationOnly, state.p, updateSearchParams]
   );
 
   return {