Next.js Discord

Discord Forum

Router.Push having delay in App Router

Unanswered
BakaPresident posted this in #help-forum
Open in Discord
BakaPresidentOP
Hi there, I've been experiencing a delay in push after login.
This is my login page
https://pastebin.com/YhP0Yj11

and the abstract from my actions.ts
export async function loginAction(email: string, password: string) {
    try {
        const user = await signIn(email, password);
        console.log("Successfully logged in");
        if (user) {
            return { success: true };
        }
        return { success: false, error: errorMessages.default };
    } catch (error: unknown) {
        if (error instanceof AppwriteException) {
            console.log(error);
            const errorType = error.type as keyof typeof errorMessages;
            return {
                success: false,
                error: errorMessages[errorType] || errorMessages.default
            };
        } else {
            console.error("Unexpected error during login:", error);
            return {
                success: false,
                error: errorMessages.default
            };
        }
    }
}


It's not the API issue as i can see Successfully logged in before it takes around 500ms - 1second to redirect me.
Any helps would be appreciate 🙏🏼

9 Replies

you could also wrap router.push in a startTransistion with useTransistion and display a loading indicator while it's loading
BakaPresidentOP
Weirdly when i do 
    useEffect(() => {
        router.prefetch("/dashboard");
    }, [router]);

    const onSubmit = async (data: LoginFormData) => {
        setServerError(null)
        setIsLoading(true)
        try {
            const result = await loginAction(data.email, data.password);
            if (result && result.success) {
                console.log("Successfully logged in");
                router.push('/dashboard');
            } else {
                setServerError(result?.error || 'An unexpected error occurred')
            }
        } catch (error) {
            setServerError('An unexpected error occurred')
            console.error('Login error:', error)
        } finally {
            setIsLoading(false)
        }
    }

I still have the delay after logging in
Polar bear
same issue here, did you figure it out @BakaPresident ? it does take too long for me to redirect after login 

try {
      await supabaseClient.auth
        .verifyOtp({
          email: normalizedEmail,
          token: otp,
          type: "email",
        })
        .then((error) => {
          if (error.error) {
            setErrorMessage(error.error?.message);
          } else {
            router.push("/dashboard");
            toast.success("redirecting to dashboard ...");
          }
          setIsVerifyLoading(false);
        });
    } catch {
      setErrorMessage("Code invalid or expired");
      setIsVerifyLoading(false);
    }
@BakaPresident Is your next page fetching data? For mine, I think it's probably loading data? Maybe try putting a loading.tsx to test it out?
Polar bear
not sure if it's fetching data, it seems like no requests are made when I redirect them, a user clicks "login", it does log them in and tries to redirect them to the home page.

but at the same time, the user goes to the landing page and starts reading, and then the redirect suddenly works like 20-30 seconds later lmaooo, I just watched it happen, so it's very unacceptable and not sure how to handle it.
Polar bear
I think I got it resolved by using window.location.href, since I want to enforce reloading and don't need the login page anymore, works just great
@Polar bear I think I got it resolved by using window.location.href, since I want to enforce reloading and don't need the login page anymore, works just great
BakaPresidentOP
I forgot what I did to fix it but i remember it was the data fetching.

Possibly because of region also because it's not close to my region which means it has to jump through my hoops to reach the server. Which is why I'm just thinking of self hosting the postgresql database myself