Tests bumped into a case where queries/mutations are en-route, but because network takes time the navigation hadn't happened quite yet. Waiting for these to finish before showing this message to the user fixes things.

Author: Ole Martin Handeland

src/components/wrappers/ProcessWrapper.tsx

@@ -21,6 +21,7 @@ import { Confirm } from 'src/features/processEnd/confirm/containers/Confirm';
 import { Feedback } from 'src/features/processEnd/feedback/Feedback';
 import { useNavigationParam } from 'src/hooks/navigation';
 import { TaskKeys, useIsValidTaskId, useNavigateToTask, useStartUrl } from 'src/hooks/useNavigatePage';
+import { useWaitForQueries } from 'src/hooks/useWaitForQueries';
 import { getComponentDef, implementsSubRouting } from 'src/layout';
 import { RedirectBackToMainForm } from 'src/layout/Subform/SubformWrapper';
 import { ProcessTaskType } from 'src/types';
@@ -197,33 +198,34 @@ function useIsWrongTask(taskId: string | undefined) {
   const isNavigating = useIsNavigating();
   const { data: process } = useProcessQuery();
   const currentTaskId = process?.currentTask?.elementId;
+  const waitForQueries = useWaitForQueries();
 
   const [isWrongTask, setIsWrongTask] = useState<boolean | null>(null);
   const isCurrentTask =
     currentTaskId === undefined && taskId === TaskKeys.CustomReceipt ? true : currentTaskId === taskId;
 
-  const timeoutRef = React.useRef<ReturnType<typeof setTimeout> | null>(null);
-
-  // We intentionally delay this state from being set until after a useEffect(), so the navigation error does not
-  // show up while we're navigating. Without this, the message will flash over the screen shortly in-between all the
-  // <Loader /> components.
+  // We intentionally delay this state from being set until after queries/mutations finish, so the navigation error
+  // does not show up while we're navigating. Without this, the message will flash over the screen shortly
+  // in-between all the <Loader /> components.
   useEffect(() => {
-    if (timeoutRef.current) {
-      clearTimeout(timeoutRef.current);
-      timeoutRef.current = null;
-    }
     if (isCurrentTask) {
       setIsWrongTask(false);
     } else {
-      timeoutRef.current = setTimeout(() => {
-        setIsWrongTask(true);
-        timeoutRef.current = null;
-      }, 100);
+      let cancelled = false;
+      const delayedCheck = async () => {
+        await waitForQueries();
+        await new Promise((resolve) => setTimeout(resolve, 100)); // Wait a bit longer, for navigation to maybe occur
+        if (!cancelled) {
+          setIsWrongTask(true);
+        }
+      };
+      delayedCheck().then();
+
+      return () => {
+        cancelled = true;
+      };
     }
-
-    const timeout = timeoutRef.current;
-    return () => void (timeout && clearTimeout(timeout));
-  }, [isCurrentTask]);
+  }, [isCurrentTask, waitForQueries]);
 
   return isWrongTask && !isCurrentTask && !isNavigating;
 }

src/hooks/useWaitForQueries.ts

@@ -0,0 +1,31 @@
+import { useCallback } from 'react';
+
+import { useQueryClient } from '@tanstack/react-query';
+import type { MutationFilters, QueryFilters } from '@tanstack/react-query';
+
+interface WaitForQueriesOptions {
+  queryFilters?: QueryFilters;
+  mutationFilters?: MutationFilters;
+}
+
+export function useWaitForQueries(options?: WaitForQueriesOptions) {
+  const queryClient = useQueryClient();
+  return useCallback(
+    async (): Promise<void> =>
+      new Promise((resolve) => {
+        const checkQueries = () => {
+          const isFetching = queryClient.isFetching(options?.queryFilters) > 0;
+          const isMutating = queryClient.isMutating(options?.mutationFilters) > 0;
+
+          if (!isFetching && !isMutating) {
+            resolve();
+          } else {
+            setTimeout(checkQueries, 10);
+          }
+        };
+
+        checkQueries();
+      }),
+    [queryClient, options?.queryFilters, options?.mutationFilters],
+  );
+}