Switches processingContext for useMutation

src/App.tsx

@@ -8,8 +8,8 @@ import { Entrypoint } from 'src/features/entrypoint/Entrypoint';
 import { InstanceProvider } from 'src/features/instance/InstanceContext';
 import { PartySelection } from 'src/features/instantiate/containers/PartySelection';
 import { InstanceSelectionWrapper } from 'src/features/instantiate/selection/InstanceSelection';
+import { TaskKeys } from 'src/features/navigation/useNavigatePage';
 import { CustomReceipt, DefaultReceipt } from 'src/features/receipt/ReceiptContainer';
-import { TaskKeys } from 'src/hooks/useNavigatePage';
 import { PresentationType } from 'src/types';
 
 export const App = () => (

src/components/form/Form.tsx

@@ -14,6 +14,12 @@ import { useNavigateToNode, useRegisterNodeNavigationHandler } from 'src/feature
 import { useUiConfigContext } from 'src/features/form/layout/UiConfigContext';
 import { usePageSettings } from 'src/features/form/layoutSettings/LayoutSettingsContext';
 import { useLanguage } from 'src/features/language/useLanguage';
+import {
+  useCurrentView,
+  useIdValidPageId,
+  useNavigateToPage,
+  useStartUrl,
+} from 'src/features/navigation/useNavigatePage';
 import {
   SearchParams,
   useNavigate,
@@ -25,7 +31,6 @@ import {
 } from 'src/features/routing/AppRoutingContext';
 import { useOnFormSubmitValidation } from 'src/features/validation/callbacks/onFormSubmitValidation';
 import { useTaskErrors } from 'src/features/validation/selectors/taskErrors';
-import { useCurrentView, useNavigatePage, useStartUrl } from 'src/hooks/useNavigatePage';
 import { getComponentCapabilities } from 'src/layout';
 import { GenericComponentById } from 'src/layout/GenericComponent';
 import { getPageTitle } from 'src/utils/getPageTitle';
@@ -49,7 +54,8 @@ export function Form() {
 }
 
 export function FormPage({ currentPageId }: { currentPageId: string | undefined }) {
-  const { isValidPageId, navigateToPage } = useNavigatePage();
+  const isValidPageId = useIdValidPageId();
+  const { mutateAsync: navigateToPage } = useNavigateToPage();
   const appName = useAppName();
   const appOwner = useAppOwner();
   const { langAsString } = useLanguage();
@@ -62,12 +68,15 @@ export function FormPage({ currentPageId }: { currentPageId: string | undefined
   useRegisterNodeNavigationHandler(async (targetNode, options) => {
     const targetView = targetNode?.pageKey;
     if (targetView && targetView !== currentPageId) {
-      await navigateToPage(targetView, {
-        ...options?.pageNavOptions,
-        shouldFocusComponent: options?.shouldFocus ?? options?.pageNavOptions?.shouldFocusComponent ?? true,
-        replace:
-          window.location.href.includes(SearchParams.FocusComponentId) ||
-          window.location.href.includes(SearchParams.ExitSubform),
+      await navigateToPage({
+        page: targetView,
+        options: {
+          ...options?.pageNavOptions,
+          shouldFocusComponent: options?.shouldFocus ?? options?.pageNavOptions?.shouldFocusComponent ?? true,
+          replace:
+            window.location.href.includes(SearchParams.FocusComponentId) ||
+            window.location.href.includes(SearchParams.ExitSubform),
+        },
       });
       return true;
     }
@@ -157,7 +166,8 @@ function useRedirectToStoredPage() {
   const pageKey = useCurrentView();
   const instanceOwnerPartyId = useNavigationParam('instanceOwnerPartyId');
   const instanceGuid = useNavigationParam('instanceGuid');
-  const { isValidPageId, navigateToPage } = useNavigatePage();
+  const isValidPageId = useIdValidPageId();
+  const { mutate: navigateToPage } = useNavigateToPage();
   const applicationMetadataId = useApplicationMetadata()?.id;
 
   const instanceId = `${instanceOwnerPartyId}/${instanceGuid}`;
@@ -168,7 +178,7 @@ function useRedirectToStoredPage() {
       const lastVisitedPage = localStorage.getItem(currentViewCacheKey);
       if (lastVisitedPage !== null && isValidPageId(lastVisitedPage)) {
         localStorage.removeItem(currentViewCacheKey);
-        navigateToPage(lastVisitedPage, { replace: true });
+        navigateToPage({ page: lastVisitedPage, options: { replace: true } });
       }
     }
   }, [pageKey, currentViewCacheKey, isValidPageId, navigateToPage]);

src/components/form/LinkToPotentialPage.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { Link } from 'react-router-dom';
 import type { LinkProps } from 'react-router-dom';
 
-import { useNavigatePage } from 'src/hooks/useNavigatePage';
+import { useIdValidPageId } from 'src/features/navigation/useNavigatePage';
 import { Hidden } from 'src/utils/layout/NodesContext';
 
 type Props = LinkProps & { children?: React.ReactNode };
@@ -16,7 +16,7 @@ export const LinkToPotentialPage = (props: Props) => {
   const page = parts[parts.length - 1];
 
   const isHiddenPage = Hidden.useIsHiddenPage(page);
-  const { isValidPageId } = useNavigatePage();
+  const isValidPageId = useIdValidPageId();
 
   const shouldShowLink = isValidPageId(page) && !isHiddenPage;
   if (shouldShowLink) {

src/components/presentation/BackNavigationButton.tsx

@@ -8,13 +8,13 @@ import cn from 'classnames';
 import { Button } from 'src/app-components/Button/Button';
 import classes from 'src/components/presentation/BackNavigationButton.module.css';
 import { useAppQueries } from 'src/core/contexts/AppQueriesProvider';
-import { useIsProcessing } from 'src/core/contexts/processingContext';
 import { Lang } from 'src/features/language/Lang';
 import { useLanguage } from 'src/features/language/useLanguage';
+import { useExitSubform } from 'src/features/navigation/useNavigatePage';
 import { useCurrentParty } from 'src/features/party/PartiesProvider';
 import { useIsSubformPage, useNavigationParam } from 'src/features/routing/AppRoutingContext';
 import { useIsMobile } from 'src/hooks/useDeviceWidths';
-import { useNavigatePage } from 'src/hooks/useNavigatePage';
+import { useHasLongLivedMutations } from 'src/hooks/useHasLongLivedMutations';
 import { returnUrlToMessagebox } from 'src/utils/urls/urlHelper';
 
 export function BackNavigationButton(props: Parameters<typeof Button>[0]) {
@@ -24,8 +24,9 @@ export function BackNavigationButton(props: Parameters<typeof Button>[0]) {
   const mainPageKey = useNavigationParam('mainPageKey');
   const isSubform = useIsSubformPage();
   const { returnUrl, isFetchingReturnUrl } = useReturnUrl();
-  const { exitSubform } = useNavigatePage();
-  const { performProcess, isAnyProcessing, isThisProcessing: isExitingSubform } = useIsProcessing();
+  const { mutateAsync: exitSubform, isPending: isExitingSubform } = useExitSubform();
+
+  const hasLongLivedMutations = useHasLongLivedMutations();
 
   const messageBoxUrl = returnUrlToMessagebox(window.location.host, party?.partyId);
 
@@ -42,8 +43,8 @@ export function BackNavigationButton(props: Parameters<typeof Button>[0]) {
   if (isSubform) {
     return (
       <Button
-        onClick={() => performProcess(exitSubform)}
-        disabled={isAnyProcessing}
+        onClick={() => exitSubform()}
+        disabled={hasLongLivedMutations}
         isLoading={isExitingSubform}
         variant='tertiary'
         size='sm'

src/components/presentation/Progress.tsx

@@ -3,12 +3,12 @@ import React from 'react';
 import { getLabelId } from 'src/components/label/Label';
 import classes from 'src/components/presentation/Progress.module.css';
 import { useLanguage } from 'src/features/language/useLanguage';
+import { usePageOrder } from 'src/features/navigation/useNavigatePage';
 import { useNavigationParam } from 'src/features/routing/AppRoutingContext';
-import { useNavigatePage } from 'src/hooks/useNavigatePage';
 
 export const Progress = () => {
   const currentPageId = useNavigationParam('pageKey');
-  const { order } = useNavigatePage();
+  const order = usePageOrder();
   const { langAsString } = useLanguage();
 
   const currentPageIndex = order?.findIndex((page) => page === currentPageId) || 0;

src/components/wrappers/ProcessWrapper.tsx

@@ -13,6 +13,12 @@ import { FormProvider } from 'src/features/form/FormContext';
 import { useGetTaskTypeById, useLaxProcessData } from 'src/features/instance/ProcessContext';
 import { Lang } from 'src/features/language/Lang';
 import { useLanguage } from 'src/features/language/useLanguage';
+import {
+  useIsCurrentTask,
+  useIsValidTaskId,
+  useNavigateToTask,
+  useStartUrl,
+} from 'src/features/navigation/useNavigatePage';
 import { PDFWrapper } from 'src/features/pdf/PDFWrapper';
 import { Confirm } from 'src/features/processEnd/confirm/containers/Confirm';
 import { Feedback } from 'src/features/processEnd/feedback/Feedback';
@@ -22,7 +28,6 @@ import {
   useNavigationPath,
   useQueryKeysAsString,
 } from 'src/features/routing/AppRoutingContext';
-import { useIsCurrentTask, useIsValidTaskId, useNavigateToTask, useStartUrl } from 'src/hooks/useNavigatePage';
 import { RedirectBackToMainForm } from 'src/layout/Subform/SubformWrapper';
 import { ProcessTaskType } from 'src/types';
 import { getPageTitle } from 'src/utils/getPageTitle';

src/features/devtools/components/DevNavigationButtons/DevNavigationButtons.tsx

@@ -7,8 +7,8 @@ import classes from 'src/features/devtools/components/DevNavigationButtons/DevNa
 import { useIsInFormContext } from 'src/features/form/FormContext';
 import { useLayouts } from 'src/features/form/layout/LayoutsContext';
 import { useRawPageOrder } from 'src/features/form/layoutSettings/LayoutSettingsContext';
+import { useNavigateToPage } from 'src/features/navigation/useNavigatePage';
 import { useNavigationParam } from 'src/features/routing/AppRoutingContext';
-import { useNavigatePage } from 'src/hooks/useNavigatePage';
 import comboboxClasses from 'src/styles/combobox.module.css';
 import { Hidden } from 'src/utils/layout/NodesContext';
 
@@ -23,15 +23,15 @@ export function DevNavigationButtons() {
 
 const InnerDevNavigationButtons = () => {
   const pageKey = useNavigationParam('pageKey');
-  const { navigateToPage } = useNavigatePage();
+  const { mutate: navigateToPage } = useNavigateToPage();
   const isHiddenPage = Hidden.useIsHiddenPageSelector();
   const rawOrder = useRawPageOrder();
   const allPages = Object.keys(useLayouts() ?? {});
 
   function handleChange(values: string[]) {
     const newView = values.at(0);
     if (newView) {
-      navigateToPage(newView);
+      navigateToPage({ page: newView });
     }
   }
 

src/features/devtools/components/LayoutInspector/LayoutInspector.tsx

@@ -11,7 +11,7 @@ import { SplitView } from 'src/features/devtools/components/SplitView/SplitView'
 import { useDevToolsStore } from 'src/features/devtools/data/DevToolsStore';
 import { useLayoutValidationForPage } from 'src/features/devtools/layoutValidation/useLayoutValidation';
 import { useLayouts, useLayoutSetId } from 'src/features/form/layout/LayoutsContext';
-import { useCurrentView } from 'src/hooks/useNavigatePage';
+import { useCurrentView } from 'src/features/navigation/useNavigatePage';
 import { parseAndCleanText } from 'src/language/sharedLanguage';
 import { useNode } from 'src/utils/layout/NodesContext';
 import type { LayoutContextValue } from 'src/features/form/layout/LayoutsContext';

src/features/devtools/components/NodeInspector/NodeInspector.tsx

@@ -11,7 +11,7 @@ import { NodeInspectorContextProvider } from 'src/features/devtools/components/N
 import { ValidationInspector } from 'src/features/devtools/components/NodeInspector/ValidationInspector';
 import { SplitView } from 'src/features/devtools/components/SplitView/SplitView';
 import { useDevToolsStore } from 'src/features/devtools/data/DevToolsStore';
-import { useCurrentView } from 'src/hooks/useNavigatePage';
+import { useCurrentView } from 'src/features/navigation/useNavigatePage';
 import { implementsAnyValidation } from 'src/layout';
 import { NodesInternal, useNode } from 'src/utils/layout/NodesContext';
 

src/features/devtools/layoutValidation/useLayoutValidation.tsx

@@ -3,7 +3,7 @@ import { createStore } from 'zustand';
 import { ContextNotProvided } from 'src/core/contexts/context';
 import { createZustandContext } from 'src/core/contexts/zustandContext';
 import { useCurrentLayoutSetId } from 'src/features/form/layoutSets/useCurrentLayoutSet';
-import { useCurrentView } from 'src/hooks/useNavigatePage';
+import { useCurrentView } from 'src/features/navigation/useNavigatePage';
 
 interface Context {
   errors: unknown;

src/features/form/layout/NavigateToNode.tsx

@@ -3,8 +3,8 @@ import type { PropsWithChildren } from 'react';
 
 import { createContext } from 'src/core/contexts/context';
 import { Hidden } from 'src/utils/layout/NodesContext';
+import type { NavigateToPageOptions } from 'src/features/navigation/useNavigatePage';
 import type { NodeRefValidation } from 'src/features/validation';
-import type { NavigateToPageOptions } from 'src/hooks/useNavigatePage';
 import type { LayoutNode } from 'src/utils/layout/LayoutNode';
 
 type NavigationHandler = (node: LayoutNode, options: NavigateToNodeOptions | undefined) => Promise<boolean>;

src/features/instance/ProcessContext.tsx

@@ -8,8 +8,8 @@ import { DisplayError } from 'src/core/errorHandling/DisplayError';
 import { Loader } from 'src/core/loading/Loader';
 import { useApplicationMetadata } from 'src/features/applicationMetadata/ApplicationMetadataProvider';
 import { useLayoutSets } from 'src/features/form/layoutSets/LayoutSetsProvider';
+import { TaskKeys, useNavigateToTask } from 'src/features/navigation/useNavigatePage';
 import { useNavigationParam } from 'src/features/routing/AppRoutingContext';
-import { TaskKeys, useNavigateToTask } from 'src/hooks/useNavigatePage';
 import { fetchProcessState } from 'src/queries/queries';
 import { isProcessTaskType, ProcessTaskType } from 'src/types';
 import { behavesLikeDataTask } from 'src/utils/formLayout';

src/features/instance/useProcessNext.tsx

@@ -10,12 +10,13 @@ import { useLaxInstanceId, useStrictInstanceRefetch } from 'src/features/instanc
 import { useReFetchProcessData } from 'src/features/instance/ProcessContext';
 import { Lang } from 'src/features/language/Lang';
 import { useCurrentLanguage } from 'src/features/language/LanguageProvider';
+import { navigatePageMutationKeys, navigationScope } from 'src/features/navigation/navigationQueryKeys';
+import { useNavigateToTask } from 'src/features/navigation/useNavigatePage';
 import { useUpdateInitialValidations } from 'src/features/validation/backendValidation/backendValidationQuery';
 import { appSupportsIncrementalValidationFeatures } from 'src/features/validation/backendValidation/backendValidationUtils';
 import { useOnFormSubmitValidation } from 'src/features/validation/callbacks/onFormSubmitValidation';
 import { Validation } from 'src/features/validation/validationContext';
 import { useEffectEvent } from 'src/hooks/useEffectEvent';
-import { useNavigateToTask } from 'src/hooks/useNavigatePage';
 import { isAtLeastVersion } from 'src/utils/versionCompare';
 import type { ApplicationMetadata } from 'src/features/applicationMetadata/types';
 import type { BackendValidationIssue } from 'src/features/validation';
@@ -39,7 +40,9 @@ export function useProcessNext() {
   const onSubmitFormValidation = useOnFormSubmitValidation();
   const applicationMetadata = useApplicationMetadata();
 
-  const { mutateAsync } = useMutation({
+  const { mutateAsync, isPending } = useMutation({
+    scope: { id: navigationScope },
+    mutationKey: navigatePageMutationKeys.processNext(),
     mutationFn: async ({ action }: ProcessNextProps = {}) => {
       if (!instanceId) {
         throw new Error('Missing instance ID, cannot perform process/next');
@@ -81,13 +84,16 @@ export function useProcessNext() {
     },
   });
 
-  return useEffectEvent(async (props?: ProcessNextProps) => {
-    const hasErrors = await onFormSubmitValidation();
-    if (hasErrors) {
-      return;
-    }
-    await mutateAsync(props ?? {});
-  });
+  return {
+    processNext: useEffectEvent(async (props?: ProcessNextProps) => {
+      const hasErrors = await onFormSubmitValidation();
+      if (hasErrors) {
+        return;
+      }
+      await mutateAsync(props ?? {});
+    }),
+    isPending,
+  };
 }
 
 function appUnlocksOnPDFFailure({ altinnNugetVersion }: ApplicationMetadata) {