auth-ui Weird css loading on Auth UI page reload

Hi, am wondering why this weird animation without css is happening on the /signin page as its not returning the auth without any css attached on the first page reload.

Video: https://github.com/supabase/auth-ui/assets/131278641/1e15475d-9de3-4cf9-9dd8-f5e61d512774

page.tsx:

import { getSession } from '@/app/supabase-server';
import AuthUI from './AuthUI';

import { redirect } from 'next/navigation';
import Logo from '@/components/icons/Logo';

export default async function SignIn() {
  const session = await getSession();

  if (session) {
    return redirect('/account');
  }

  return (
    <div className="bg-bkg flex justify-center height-screen-helper">
      <div className="flex flex-col justify-between max-w-lg p-3 m-auto w-80">
        <div className="flex justify-center pb-12">
          <Logo width="64px" height="64px"/>
        </div>
        <AuthUI />
      </div>
    </div>
  );
}

AuthUI.tsx:

'use client';

import { useSupabase } from '@/app/supabase-provider';
import { getURL } from '@/utils/helpers';
import { Auth } from '@supabase/auth-ui-react';
import { ThemeSupa } from '@supabase/auth-ui-shared';
import { useTheme } from 'next-themes'

export default function AuthUI() {
  const { resolvedTheme } = useTheme();
  const { supabase } = useSupabase();
  return (
    <div className="flex flex-col space-y-4">
      <Auth
        supabaseClient={supabase}
        providers={['google', 'apple']}
        redirectTo={`${getURL()}/auth/callback`}
        magicLink={true}
        theme={resolvedTheme === 'dark' ? 'dark' : 'default'}
        appearance={{
          theme: ThemeSupa,
          variables: {
            default: {
              colors: {
                defaultButtonBackground: 'bg-white',
                brand: '#2563eb',
                brandAccent: '#3b82f6',
              }
            }
          }
        }}
      />
    </div>
  );
}

To reproduce it: Basically just install the auth UI and its ThemeSupa and use the code. On every page reload I get this weird loading (not showing css in the first eye blink).

Oct 18 '23 07:10 bearbricknik

I have same issue. changed appearance too

[email protected] [email protected]

Oct 18 '23 15:10 dvvolynkin

Same here. Using dynamic loading with ssr: false in Next.js as a workaround.

Nov 08 '23 08:11 ersinakinci

Same here. Using dynamic loading with ssr: false in Next.js as a workaround.

How exactly you do that? Within the login page? Or within the authUI?

Nov 08 '23 09:11 bearbricknik

Same here. Using dynamic loading with ssr: false in Next.js as a workaround.

How exactly you do that? Within the login page? Or within the authUI?

You have to use the dynamic import from next js probably where the component is being used

Nov 13 '23 08:11 zaynelovecraft

Same sort of issue except I'm using the Svelte example, I tried enabling and disabling SSR mode but same weird effect on page load, and honestly this sort of ruins everything if you want to convey to the user you're on a high-quality site..

EDIT: I actually disabled SSR mode incorrectly initially, after correctly disabling it the weird effect is no longer there, but the problem is I would like SSR mode enabled 😅