Next.js Discord

Discord Forum

NextJS13 loading state with next/navigation

Answered
PepeW posted this in #help-forum
Open in Discord
PepeWOP
I have a button in my client component that does a router.replace("some-url").

Is there a way in NextJS13 to get a loading state from the router so I can display a spinner while the router is replacing the url ?
Answered by Ray
  const router = useRouter();
  const [isPending, startTransition] = useTransition();

  return (
    <button
      onClick={() => {
        startTransition(() => {
          router.replace("some-url");
        });
      }}
    >
      {isPending ? "loading" : "go"}
    </button>
  );
View full answer

2 Replies

@PepeW I have a button in my client component that does a `router.replace("some-url")`. Is there a way in NextJS13 to get a loading state from the router so I can display a spinner while the router is replacing the url ?
Ray
  const router = useRouter();
  const [isPending, startTransition] = useTransition();

  return (
    <button
      onClick={() => {
        startTransition(() => {
          router.replace("some-url");
        });
      }}
    >
      {isPending ? "loading" : "go"}
    </button>
  );
Answer
PepeWOP
Perfect thank you