Bug: create and delete both fail to navigate after success — React #300 / silent no-op due to void navigate race

[marcusbellamyshaw-cell]

Bug

Two separate content operations fail to navigate after success due to the same race condition in router.tsx — the user is left on the wrong page with no error message.

1. Deleting a content entry

Deleting from the editor throws a minified React error #300 ("Something went wrong!"). The delete succeeds server-side but the UI crashes during navigation back to the collection list.

2. Creating a new content entry

Saving a new entry from /content/[collection]/new shows "Saving..." but never navigates to the edit view. The entry is created successfully (HTTP 201) but the user is left stranded on the /new page with no draft/publish buttons and no indication the save worked. Navigating manually to the collection list confirms the entry exists.

Steps to reproduce (creation case)

1. Go to any collection → New entry
2. Fill in content and click Save
3. Spinner shows "Saving..." then stops — no navigation, no draft/publish buttons appear
4. Visit the collection list directly — the entry exists

Root cause

Both flows share the same broken pattern in router.tsx — void on async operations with no ordering:

// Create onSuccess
onSuccess: () => {
    void navigate({
        to: "/content/$collection/$id",
        params: { collection, id: result.id },
    });
},

// Delete onSuccess  
onSuccess: () => {
    void queryClient.invalidateQueries({ queryKey: ["content", collection] });
    void queryClient.invalidateQueries({ queryKey: ["content", collection, "trash"] });
    void navigate({ to: "/content/$collection", params: { collection }, search: { locale: undefined } });
},

The navigate calls fire without being awaited. The concurrent invalidateQueries calls trigger refetches and React state updates that race against the navigation. If any in-flight mutation (auto-save, or a query refetch resolving after the route has already changed) completes while the component is mid-unmount, it attempts a state update on an unmounting tree — producing the React #300 error or silently swallowing the navigation entirely.

Note: the exact mechanism triggering #300 in the delete case is the unordered concurrency between invalidateQueries and navigate — we observed the error consistently in production but haven't isolated whether it's specifically the auto-save mutation, a refetch completing late, or TipTap's onEditorReady(null) cleanup firing mid-navigation. The fix below addresses all of these.

Fix

Await navigate after any query invalidations, and cancel pending mutations before navigating:

onSuccess: async () => {
    autosaveMutation.reset(); // cancel any in-flight auto-save
    await Promise.all([
        queryClient.invalidateQueries({ queryKey: ["content", collection] }),
        queryClient.invalidateQueries({ queryKey: ["content", collection, "trash"] }),
    ]);
    await navigate({ to: "/content/$collection", params: { collection }, search: { locale: undefined } });
},

Impact

Both bugs leave the user with no feedback that their action worked. The creation case is particularly bad — "Saving..." appears to fail silently, causing users to attempt duplicate saves or think their content was lost.