Blank page upon first loading in production

[bathientran]

Hey everyone!

I'm currently implementing useSWR and am running into an issue where during the first load, the page stays blank rather than showing anything. Here's my code for reference:

const Campaign = (props) => {
    const { data, mutate } = useSWR('/api/campaign-dashboard/${campaignId}', fetcher);

    const [isRefreshing, setIsRefreshing] = useState(false);

    const handleRefresh = async () => {
        mutate();
        setIsRefreshing(true);
        await timeout(300);
        setIsRefreshing(false);
    };

    return (
        <>
            {!data ? (
                <CampaignDashboardSkeleton />
            ) : (
                <CampaignDashboard
                    refreshStatus={isRefreshing}
                    campaignData={data}
                    handleRefresh={handleRefresh}
                />
            )}
        </>
    );
};

This only occurs during the first load and only on production (locally it always works). My project is deployed on Vercel using NextJs. Has anyone experienced this before and knows a solution?

Thanks!