Data only loads after internal navigation

projects.tsx

import {GetServerSideProps, InferGetServerSidePropsType, NextPage} from 'next';
import styles from '../styles/Home.module.css';
import Footer from '../components/Footer';
import Header from '../components/Header';
import Meta from '../components/Meta';
import {useEffect, useState} from 'react';
import Link from 'next/link';
import {supabaseClient, withPageAuth} from '@supabase/auth-helpers-nextjs';

export const getServerSideProps: GetServerSideProps = withPageAuth({redirectTo: '/auth'});

const Projects: NextPage = ({user}: InferGetServerSidePropsType<typeof getServerSideProps>) => {
  const [projects, setProjects] = useState<object | null>(null); // todo: Project types
  const [isLoading, setLoading] = useState<boolean>(false);

  useEffect(() => {
    // fixme: works when navigating within the app, but not when the page is loaded from scratch
    async function loadData() {
      console.log({user});
      const {data} = await supabaseClient.from('projects').select();
      setLoading(false);
      setProjects(data);
    }

    setLoading(true);

    // Only run query once user is logged in.
    // todo: error handling
    if (user) loadData().then(() => console.log('Projects loaded', projects));
  }, [user]);

  return (
    <div className={styles.container}>
      <Meta titlePrefix={`Projects`} description={'todo'}></Meta>

      <Header user={user} />

      <main className={styles.main}>
        <h1 className={styles.title}>Prioritizr Projects</h1>
        <br /><br />
        <div className={styles.grid3}>
          {!projects && isLoading && <p className={styles.description}>Loading projects...</p>}
          {
            // @ts-ignore - todo: Project types
            projects && projects.map(p => (<Link href={`projects/${p.id}`} key={p.id}>
              <a className={styles.card}>
                <h2 className={styles.solo}>{p.name}</h2>
              </a>
            </Link>))
          }
          {/* todo: module logic for handling partially-filled final row */}
        </div>
        <div className={styles.grid}>
          <Link href='/new'>
            <a className={styles.card}>
              <h2>New Project &rarr;</h2>
              <p>Need to prioritize a new set of things? Create a new project to get started on your own or with your
                team.</p>
            </a>
          </Link>
        </div>
      </main>

      <Footer />
    </div>
  );
};

export default Projects;