From 080890560ab4533325715cfd41378d73ce1feb25 Mon Sep 17 00:00:00 2001
From: Minh-Phuc Tran <phuctm97@gmail.com>
Date: Tue, 2 Jul 2024 23:06:37 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20fix:=20fix=20clerk=20appearance?=
 =?UTF-8?q?=20is=20not=20applied=20correctly=20(#3105)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layout/AuthProvider/Clerk/index.tsx | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/src/layout/AuthProvider/Clerk/index.tsx b/src/layout/AuthProvider/Clerk/index.tsx
index 05531ff4a1cfb..ff6e798973337 100644
--- a/src/layout/AuthProvider/Clerk/index.tsx
+++ b/src/layout/AuthProvider/Clerk/index.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import { ClerkProvider } from '@clerk/nextjs';
-import { PropsWithChildren, memo, useMemo } from 'react';
+import { PropsWithChildren, memo, useEffect, useMemo, useState, useTransition } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import UserUpdater from './UserUpdater';
@@ -15,6 +15,18 @@ const Clerk = memo(({ children }: PropsWithChildren) => {
 
   const localization = useMemo(() => getResourceBundle(language, 'clerk'), [language]);
 
+  // When useAppearance returns different result during SSR vs. client-side (when theme mode is auto), the appearance is not applied
+  // It's because Clerk internally re-applies SSR props after transition which overrides client-side props, see https://github.com/clerk/javascript/blob/main/packages/nextjs/src/app-router/client/ClerkProvider.tsx
+  // This re-renders the provider after transition to make sure client-side props are always applied
+  const [, setCount] = useState(0);
+  const [isPending, startTransition] = useTransition();
+  useEffect(() => {
+    if (isPending) return;
+    startTransition(() => {
+      setCount((count) => count + 1);
+    });
+  }, [isPending, startTransition]);
+
   return (
     <ClerkProvider appearance={appearance} localization={localization}>
       {children}