fix: 🐛 Sometimes form editor page not loading

Moved clerk provider to root layout, and make root page force static rendered ✅ Closes: #206
growupanand · Mar 3, 2024 · c46eab4 · c46eab4
1 parent 6df1fcb
commit c46eab4
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 33 deletions.
diff --git a/apps/web/src/app/(landingPage)/_components/userButton.tsx b/apps/web/src/app/(landingPage)/_components/userButton.tsx
@@ -6,18 +6,9 @@ import { Skeleton } from "@convoform/ui/components/ui/skeleton";
 import { LayoutDashboard } from "lucide-react";
 
 import { LinkN } from "../../../components/common/linkN";
-import { AuthProvider } from "../../../components/providers/authProvider";
 import { SignInButton } from "./signInButton";
 
 export default function UserSignInButton() {
-  return (
-    <AuthProvider>
-      <UserSignInButtonInner />
-    </AuthProvider>
-  );
-}
-
-function UserSignInButtonInner() {
   const { isSignedIn } = useAuth();
 
   if (isSignedIn) {

diff --git a/apps/web/src/app/(landingPage)/layout.tsx b/apps/web/src/app/(landingPage)/layout.tsx
@@ -4,6 +4,12 @@ import { Footer } from "@/app/(landingPage)/_components/footer";
 import { Header } from "@/app/(landingPage)/_components/header";
 import { SectionShell } from "./_components/sectionShell";
 
+/**
+ * We need to force static rendering for our homepage, by setting `dynamic` to `force-static`
+ * Because we used <ClerkProvider> in root Layout, Which make whole child tree to be dynamic rendered.
+ */
+export const dynamic = "force-static";
+
 type Props = {
   children: React.ReactNode;
 };

diff --git a/apps/web/src/app/(protectedPage)/layout.tsx b/apps/web/src/app/(protectedPage)/layout.tsx
diff --git a/apps/web/src/app/auth/layout.tsx b/apps/web/src/app/auth/layout.tsx
@@ -2,26 +2,23 @@ import { ClerkLoading } from "@clerk/nextjs";
 
 import BrandName from "@/components/common/brandName";
 import Spinner from "@/components/common/spinner";
-import { AuthProvider } from "@/components/providers/authProvider";
 
 type Props = {
   children: React.ReactNode;
 };
 
 export default function Layout({ children }: Readonly<Props>) {
   return (
-    <AuthProvider>
-      <main className="container max-w-[900px]">
-        <nav className="mt-5 flex items-center justify-center p-3">
-          <BrandName className="text-3xl" />
-        </nav>
-        <ClerkLoading>
-          <div className="flex w-full justify-center">
-            <Spinner label="Please wait..." />
-          </div>
-        </ClerkLoading>
-        {children}
-      </main>
-    </AuthProvider>
+    <main className="container max-w-[900px]">
+      <nav className="mt-5 flex items-center justify-center p-3">
+        <BrandName className="text-3xl" />
+      </nav>
+      <ClerkLoading>
+        <div className="flex w-full justify-center">
+          <Spinner label="Please wait..." />
+        </div>
+      </ClerkLoading>
+      {children}
+    </main>
   );
 }
diff --git a/apps/web/src/app/layout.tsx b/apps/web/src/app/layout.tsx
@@ -7,6 +7,7 @@ import type { Viewport } from "next";
 import { Toaster } from "@convoform/ui/components/ui/toaster";
 
 import GoogleAnalytics from "@/components/googleAnalytics";
+import { AuthProvider } from "@/components/providers/authProvider";
 import { TRPCReactProvider } from "@/trpc/react";
 import { roboto } from "./fonts";
 
@@ -74,7 +75,9 @@ export default function RootLayout({
         {process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS ? (
           <GoogleAnalytics ga_id={process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS} />
         ) : null}
-        <TRPCReactProvider>{children}</TRPCReactProvider>
+        <TRPCReactProvider>
+          <AuthProvider>{children}</AuthProvider>
+        </TRPCReactProvider>
         <Toaster />
       </body>
     </html>