From 19cd370e45808858d736d3b9a52c1c367bc76f8d Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Fri, 5 Dec 2025 20:19:37 +0000
Subject: [PATCH 1/2] Initial plan


From 91579d0bb85b6161709555ef842a3f7e27301788 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Fri, 5 Dec 2025 20:23:02 +0000
Subject: [PATCH 2/2] Memoize appearance prop in ClerkProvider to prevent
 unnecessary re-renders

Co-authored-by: BSd3v <82055130+BSd3v@users.noreply.github.com>
---
 src/ts/components/ClerkProvider.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/ts/components/ClerkProvider.tsx b/src/ts/components/ClerkProvider.tsx
index a240e80..4d91be7 100644
--- a/src/ts/components/ClerkProvider.tsx
+++ b/src/ts/components/ClerkProvider.tsx
@@ -24,12 +24,16 @@ const ClerkProvider: React.FC<PropsWithChildren<ClerkProviderProps>> = ({
   themeName,
   ...others
 }) => {
+  const appearance = React.useMemo(() => {
+    const theme = themeName ? themes[themeName as keyof typeof themes] : undefined;
+    return theme ? { baseTheme: theme } : undefined;
+  }, [themeName]);
 
   return (
     <ClerkClerkProvider
       publishableKey={PUBLISHABLE_KEY}
       afterSignOutUrl={afterSignOutUrl}
-      appearance={{ baseTheme: themes[themeName] || undefined }}
+      appearance={appearance}
       {...others}
     >
       {children}