fixed suspense loading with clerk

559454f9 · Yusuf Akgül · 7c07d289 · 559454f9 · 559454f9 · 559454f9
Commit 559454f9 authored 1 year ago by Yusuf Akgül
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -2,8 +2,10 @@ import { Inter } from 'next/font/google'
 import './globals.css'

 import Providers from '@/components/react-query/provider'
+import SiteLoad from '@/components/site-loading'
 import { ThemeProvider } from '@/components/ui/theme-provider'
 import { ClerkProvider } from '@clerk/nextjs'
+import { Suspense } from 'react'

 const inter = Inter({ subsets: ['latin'] })

@@ -22,11 +24,13 @@ export default function RootLayout({
      <head />
      <body className={inter.className}>
        <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
-          <ClerkProvider>
-            <Providers>
-              {children}
-            </Providers>
-          </ClerkProvider>
+          <Suspense fallback={<SiteLoad />}>
+            <ClerkProvider>
+              <Providers>
+                {children}
+              </Providers>
+            </ClerkProvider>
+          </Suspense>
        </ThemeProvider>
      </body>
    </html>

--- a/components/nav.tsx
+++ b/components/nav.tsx
@@ -63,7 +63,7 @@ export default function DashboardNav({ items }: DashboardNavProps) {
                    </p>
                </div>
            }
-            {/* <UserButton afterSignOutUrl="/" /> */}
+            <UserButton afterSignOutUrl="/" />
            <ModeToggle />
        </nav>
    )

--- a/app/loading.tsx
+++ b/app/loading.tsx
 import { Skeleton } from "@/components/ui/skeleton"

-export default function Loading() {
+export default function SiteLoad() {
    return (
        <div className="grid w-full gap-10">
            <div className="flex w-full items-center justify-between">

--- a/prisma/db.ts
+++ b/prisma/db.ts
@@ -7,7 +7,7 @@ const globalForPrisma = global as unknown as {
 export const prisma =
  globalForPrisma.prisma ??
  new PrismaClient({
-    log: ['query'],
+    // log: ['query'],
  })

 if (process.env.NODE_ENV !== 'production') globalForPrisma.prisma = prisma
\ No newline at end of file