Next.js Discord

Discord Forum

Is it possible to somehow await router functions?

Unanswered
Black carp posted this in #help-forum
Open in Discord
Black carpOP
Is it possible to somehow await router functions until the new page finishes loading or at least the UI already changed to the loading.tsx file of the page you navigate to? (I'm talking about awaiting functions like router.push("/"), etc..) - I'm using app router

One example (of many) that I have is that I want my react-hook-form and sometimes react-query to keep showing the loading state in my UI even after the async function finished running and now the page is navigating... In both of the above libs the loading state is true as long as the function is still awaiting (mutationFn in react-query or onSubmit in react-hook-form), and when my router.push("/") is the last line of their async function it changes the loading state back to false even though the router still didn't finish navigating to the next page, so I have few moments (even seconds on slow connections) of stale state where the user can perform the same action again but they are already redirected to the next page

2 Replies

@Black carp Is it possible to somehow await router functions until the new page finishes loading or at least the UI already changed to the `loading.tsx` file of the page you navigate to? (I'm talking about awaiting functions like `router.push("/")`, etc..) - I'm using app router One example (of many) that I have is that I want my `react-hook-form` and sometimes `react-query` to keep showing the loading state in my UI even after the async function finished running and now the page is navigating... In both of the above libs the loading state is true as long as the function is still awaiting (`mutationFn` in `react-query` or `onSubmit` in `react-hook-form`), and when my `router.push("/")` is the last line of their async function it changes the loading state back to false even though the router still didn't finish navigating to the next page, so I have few moments (even seconds on slow connections) of stale state where the user can perform the same action again but they are already redirected to the next page
Ray
in this case, i would use useTransition like this
const [pending, startTransition] = useTransition();

const isLoading = pending || form.formState.isSubmitting;

const onSubmit = form.handleSubmit(async (data) => {
    startTransition(async () => {
      const { errors } = (await login(data)) || {};
      if (errors?.email) {
        form.setError("email", { message: `${errors.email}` });
        return;
      }
      if (errors?.password) {
        form.setError("password", { message: `${errors.password}` });
        return;
      }
      router.replace("/");
    });
  });
Original message was deleted
Black carpOP
Thank you that is very useful information!