The new Router doesn't return a Promise

[codinginflow]

With the old pages router, I could await router.push. I used this to keep a button disabled while we are in the process of navigating to another page:

   async function onSubmit(input: CreatePostFormData) {
        try {
            await BlogApi.createBlogPost(input);
            await router.push("/blog/" + slug);
        } catch (error) {
            console.error(error);
            alert(error);
        }
    }

The new router doesn't return a Promise. Is there a way to achieve a similar behavior without using my own state? Or is there a plan to implement this behavior?

[devjiwonchoi]

While using userouter, it only works on Client Components. Add 'use client' on the very top of the code.
Ref: https://nextjs.org/docs/app/building-your-application/routing/linking-and-navigating

[icyJoseph]

that's not the question...

You see, you used to be able to await for the route transition, before letting other code come in, you can't do that anymore, other than try to wrap the call to router.push, with a startTransition hook, but since the page will, most likely, unmount, you'd lose the isPending state :(

The root issue being the new design of the router: #41745 (reply in thread)

[devjiwonchoi]

@codinginflow Apologies for confusion, thank you @icyJoseph .

[codinginflow]

that's not the question...

You see, you used to be able to await for the route transition, before letting other code come in, you can't do that anymore, other than try to wrap the call to router.push, with a startTransition hook, but since the page will, most likely, unmount, you'd lose the isPending state :(

The root issue being the new design of the router: #41745 (reply in thread)

Can you tell me more about how this startTransition approach would work? Does this allow me to wait until the page navigation is finished?

[icyJoseph]

Take for instance:

"use client";
import { useTransition } from "react";

import { useRouter } from "next/navigation";

export function CreatePost() {
  const router = useRouter();
  const [isPending, startTransition] = useTransition();

  const addPost = trpc.post.add.useMutation({
    async onSuccess(_input, output) {
      startTransition(() => {
        router.push(`/post/${output.id}`);
      });
    },
  });

  return (
    <form
      onSubmit={() => {
        addPost.mutate({
          text: "123",
        });
      }}
    >
      <input type="submit" disabled={addPost.isMutating || isPending} />
    </form>
  );
}

So as the route transition is batched, you start a pending transition, and disable the input while that's up - once it transitions, the page un-mounts - which in this case is ok, the input will be removed from the DOM so we don't mind, but it might not be so good for other use cases.

[codinginflow]

Take for instance:

"use client";
import { useTransition } from "react";

import { useRouter } from "next/navigation";

export function CreatePost() {
  const router = useRouter();
  const [isPending, startTransition] = useTransition();

  const addPost = trpc.post.add.useMutation({
    async onSuccess(_input, output) {
      startTransition(() => {
        router.push(`/post/${output.id}`);
      });
    },
  });

  return (
    <form
      onSubmit={() => {
        addPost.mutate({
          text: "123",
        });
      }}
    >
      <input type="submit" disabled={addPost.isMutating || isPending} />
    </form>
  );
}

So as the route transition is batched, you start a pending transition, and disable the input while that's up - once it transitions, the page un-mounts - which in this case is ok, the input will be removed from the DOM so we don't mind, but it might not be so good for other use cases.

Wow, this works for my use case. I had no idea about this API. Thank you very much!
Do you have an example of a scenario when this would not work ("losing the isPending state")? I don't know what you're referring to.

[icyJoseph]

Great! You can pick the comment as answer :)

Well, for example nprogress shows a global UI element, and for that this trick won't work.

[codinginflow]

Great! You can pick the comment as answer :)

Well, for example nprogress shows a global UI element, and for that this trick won't work.

I see. But now that I'm thinking about it, what benefit does this have over just setting a state to true? I'm not even sure why we put the push call into the startTransition callback 🤔 I'm still reading up on this API.

[icyJoseph]

Yeah you have to deep dive into: https://react.dev/reference/react/useTransition

In short the router push method causes state change, and while React processes that, you get a flag already, for free. This is because the router state is fully compatible with concurrent features. I'm out of office, can't expand much more right now.

[ricoarisandyw]

in my case, I don't know why isPending is not triggered in my layout.tsx from this answer #49810 (reply in thread). sorry, prioritze other task rather than go deeper but I hope this can help others.
so I try to make transition animation screen which start when router.push and gone when done. my solution is useEffect + usePathname.

export default function useAsyncRouter() {
  const path = usePathname();
  const router = useRouter();
  const resolvePath = useRef<Function | null>(null);

  const pushCallback = (href: string, callback?: Function) => {
    router.push(href);
    if (callback) {
      resolvePath.current = callback;
    }
  };

  const push = (href: string) => {
    return new Promise((resolve) => pushCallback(href, resolve));
  };

  useEffect(() => {
    resolvePath.current?.();
  }, [path]);

  return {
    ...router,
    push
  };
}

// usage
await router.push('somewhere')

[ptts]

I am having the same issue. (Next 14.1): The useTransition does not seem to trigger.

This issue is also related to #58520

[JungeWerther]

I managed to solve it using a custom hook, which even has the advantage that you can run application code not only after the page has loaded, but in response to certain events (in my case, once a websocket connection has been established).

First, I defined a SharedStateContext which tracks when the page isReady:

"use client"
import React, { createContext, useContext, useState, ReactNode } from 'react';

interface SharedStateContextType {
  isReady: boolean;
  setIsReady: (isReady: boolean) => void;
}

const SharedStateContext = createContext<SharedStateContextType | undefined>(undefined);

export const SharedStateProvider = ({ children }: { children: ReactNode }) => {
  const [isReady, setIsReady] = useState(false);

  return (
    <SharedStateContext.Provider value={{ isReady, setIsReady }}>
      {children}
    </SharedStateContext.Provider>
  );
};

export const useSharedState = () => {
  const context = useContext(SharedStateContext);
  if (context === undefined) {
    throw new Error('useSharedState must be used within a SharedStateProvider');
  }
  return context;
};

in layout.tsx, I wrap my code in a SharedStateProvider

return (
    <html lang="en">
      <body className={inter.className}>
        <SharedStateProvider>
            ...
            {children}
            ...
        </SharedStateProvider>
      </body>
    </html>
  );
}

Now, in a special component which is a part of my layout, I add a useEffect hook which depends on the isReady state (where run() runs the code I want to run).

 const { isReady, setIsReady } = useSharedState()
...
 useEffect(() => {
        if (isReady) {
            run()
        }
    }, [isReady])

My event (e.g. button-click) triggers a function that looks like:

  () => {
setIsReady(false)

        command.redirect && (
            command.redirect !== pathName
        ) ? router.push(
            command.redirect
        ) : setIsReady(true)
}

where pathName is obtained in a client component by const pathName = usePathName()

Now, all that rests is to add a

const {setIsReady} = useSharedState()

someAsyncEventThatMustBeAwaitedBeforeExecutingCodeFromOtherPage().then(() => {
   setIsReady(true)
}

which is a bit more verbose than other solutions but super flexible and very useful !!!

Hope this helps.