Why navigation.state does not change to idle after redirect?

[matheus4lves]

I'm working on an app that displays a form for allowing users create posts. After the post is created, the action redirects the user to the newly created post.

These are my routes:

// Other code
{
  path: "create",
  element: <Create />,
  action: createAction(appState, appDispatch), // Currying because I need to update some global state from within the action
},
{
  path: "post/:id",
  element: <ViewPost />,
  loader: postLoader,
},
// Other code

This is Create's action:

const action =
  (appState, appDispatch) =>
  async ({ request }) => {
    try {
      const formData = await request.formData();
      const post = Object.fromEntries(formData);
      const { data: postID } = await Axios.post(
        "/create",
        {
          ...post,
        },
        { signal: request.signal }
      );

      // Other code

      return redirect(`/post/${postID}`);
    } catch (error) {
      console.error(error);
    }
  };

And this is ViewPost's loader:

const loader = async ({ params, request }) => {
  try {
    const { data: post } = await Axios.get(`/post/${params.id}`, {
      signal: request.signal,
    });
    if (post) {
      return { post };
    } else {
      throw new Response(null, {
        status: 404,
        statusText: "Not Found",
      });
    }
  } catch (error) {
    console.error(error);
  }
};

Since the Create component has no loader, I was expecting the following navigation state transition:

idle -> submitting -> loading -> idle (Create is rendered -> User submits new post -> ViewPost's loader is called -> ViewPost is rendered)

But I get

idle -> submitting -> loading

When using redirect.

Besides, the URL changes from /create to /post/<id>, but React Router does not render the ViewPost component. In other words, it redirects but does not trigger a rendering for the ViewPost component.

Using the useNavigate() hook as a work-around produces the expected result (React Router changes the URL and renders the ViewPost component). However, the navigation state transition is as follows:

idle -> submitting -> idle

So, although the loader runs and the component is rendered, the "loading" state is not logged.

I'm logging navigation.state in the Root component, where I have this code:

{navigation.state === "loading" ? (
  <Loading />
) : (
  // Wrapped in Suspense because the Create component is lazy loaded
  <Suspense fallback={null}>
    <Outlet />
  </Suspense>
)}

As you can see, I'm displaying a Loading component and, because the navigation state transition stops on "loading" (again, when using redirect), React Router keeps displaying the Loading component until I either refresh the page or go back and forth.