Flashing on refresh on a protected route

import { Outlet, createFileRoute, redirect } from "@tanstack/react-router";
import { validateSessionCookie } from "../../utils/session";
import { getAuthSessionCookie } from "@blazar/helpers";
import { apiTreaty } from "@blazar/elysia";
import { useAuth } from "../../auth";

const AuthLayout = () => {
  return (
    <div className="flex justify-center items-center h-screen">
      <Outlet />
    </div>
  );
};

export const Route = createFileRoute("/auth/_layout")({
  component: AuthLayout,
  beforeLoad: async ({ context }) => {
    const { session, loading } = context.auth;

    if (loading) {
      return false;
    }

    if (session) {
      throw redirect({
        to: "/",
      });
    }

    return true;
  },
});

import { Outlet, createFileRoute, redirect } from "@tanstack/react-router";
import { validateSessionCookie } from "../../utils/session";
import { getAuthSessionCookie } from "@blazar/helpers";
import { apiTreaty } from "@blazar/elysia";
import { useAuth } from "../../auth";

const AuthLayout = () => {
  return (
    <div className="flex justify-center items-center h-screen">
      <Outlet />
    </div>
  );
};

export const Route = createFileRoute("/auth/_layout")({
  component: AuthLayout,
  beforeLoad: async ({ context }) => {
    const { session, loading } = context.auth;

    if (loading) {
      return false;
    }

    if (session) {
      throw redirect({
        to: "/",
      });
    }

    return true;
  },
});