'use client'
import { useAuth } from '../../../../AuthUserContext';


const CreateNewDraft = ({ params }) => {

    const { authUser, loading } = useAuth();
    const router = useRouter();

    // Listen for changes on loading and authUser, redirect if needed

    useEffect(() => {
        if (!loading || !authUser) {
            router.push('/');
        }else if (authUser) { // Make sure authUser exists before fetching data

I have some code like this. right now the router takes about a second to navigate to / in which it shows the page. How do I have it check if the user is authenticated first, then render the page. I am doing auth by wrapping an authcontext around my outer layout.tsx