Weird css loading on Auth UI page reload

[bearbricknik]

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).

[dvvolynkin]

I have same issue.
changed appearance too

[email protected] [email protected]

[ersinakinci]

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

[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?

[zaynelovecraft]

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

[nmalchy]

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 😅

[dvvolynkin]

I've set CSS classes directly and it become stable

[vigneshksaithal]

#240

[scosman]

Workaround for SvelteKit: export const ssr = false

[vogdev]

Same

"use client"

Screen.Recording.2024-04-25.at.21.02.06.mov