export default function Dashboard() {
    const router = useRouter()
    const { data: session, status } = useSession()
    const [isLoading, setLoading] = useState(true)
    const [bios, setBios] = useState([])

    useEffect(() => {
        const fetchUser = async () => {
            try {
                setLoading(true)
                const response = await fetch('/api/user/bio/edit/dashboard')
                const responseJSON = await response.json()
                if (!response.ok) {
                    console.error(responseJSON.message)
                    toast.error('Something went wrong')
                    setLoading(false)
                    return
                } else {
                    console.log(responseJSON)
                    setBios(responseJSON.bio)
                }
            } catch (error) {
                console.error(error)
            } finally {
                setLoading(false)
            }
        }
        fetchUser()
    }, [])

    useEffect(() => {
        if (!session && status === 'unauthenticated') {
            router.push('/login')
        }
    }, [session, status])

    if (status === 'loading' || isLoading) {
        return <Loading />
    }

    return (
        <div className="min-h-[calc(100dvh-65px)] py-20">
            <CreateNewButton />
            <div className="space-y-5 mt-8">
                {bios && bios.length > 0 ? (
                    bios
                        ?.sort((a: any, b: any) => a.createdAt - b.createdAt)
                        .map((b: any) => <BioLink key={b.id} b={b} />)
                ) : (
                    <p className="mt-4">
                        Get started by creating a new biolink
                    </p>
                )}
            </div>
        </div>
    )
}

when I visit my route, the dashboard flashes for a second before redirecting away because Im not signed in. I want it to not do that, just load until signed in and data fetched.

am I even doing all of this in the best way?