This mutation check was not really reactive, so it could end up locking the entire application if the component never re-renders. Also, if you're unlucky you'll suddenly get the loader again during normal form filling because this re-rendered and suddenly found a (normal) mutation was in progress.

Fixing this seems to make both tests stable again:
- components.ts 'should be possible to change language back and forth and reflect the change in the UI', which was the initially flaky one that made me write this code
- validation.ts 'Required field validation should be visible on submit, not on blur', which now failed sometimes because you can't blur a field that doesn't have focus (and it didn't have focus any more because the loader flashed by for a short while when mutating).

Author: Ole Martin Handeland

src/features/datamodel/DataModelsProvider.tsx

@@ -1,7 +1,7 @@
-import React, { useCallback, useEffect, useMemo } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef } from 'react';
 import type { PropsWithChildren } from 'react';
 
-import { useQueryClient } from '@tanstack/react-query';
+import { useMutationState, useQueryClient } from '@tanstack/react-query';
 import deepEqual from 'fast-deep-equal';
 import { createStore } from 'zustand';
 import type { JSONSchema7 } from 'json-schema';
@@ -256,18 +256,19 @@ function BlockUntilLoaded({ children }: PropsWithChildren) {
     useSelector((state) => state);
   const actualCurrentTask = useCurrentLayoutSetId();
   const isPDF = useIsPdf();
-  const mutations = useQueryClient()
-    .getMutationCache()
-    .findAll({ mutationKey: ['saveFormData'] });
 
-  if (mutations.some((m) => m.state.status === 'pending')) {
+  const currentMutations = useMutationState({ filters: { status: 'pending', mutationKey: ['saveFormData'] } });
+  const hasPassedMutationCheck = useRef(false);
+  if (currentMutations.length > 0 && !hasPassedMutationCheck.current) {
     // FormDataWrite automatically saves unsaved changes on unmount. If something happens above us in the render tree
     // that causes FormDataWrite to be unmounted (forcing it to save) and re-mounts everything (including us), we
     // should wait for that previously started save to complete. Otherwise, we'd end up saving outdated initial data
     // and cause a 409 when patching later.
     return <Loader reason='save-form-data' />;
   }
 
+  hasPassedMutationCheck.current = true;
+
   if (error) {
     // Error trying to fetch data, if missing rights we display relevant page
     if (isAxiosError(error) && error.response?.status === HttpStatusCodes.Forbidden) {