From 559454f9279855fea1bce43b1a20175581416d8b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Yusuf=20Akg=C3=BCl?= <s86116@bht-berlin.de>
Date: Wed, 24 May 2023 16:09:31 +0200
Subject: [PATCH] fixed suspense loading with clerk
---
app/layout.tsx | 14 +++++++++-----
components/nav.tsx | 2 +-
app/loading.tsx => components/site-loading.tsx | 2 +-
prisma/db.ts | 2 +-
4 files changed, 12 insertions(+), 8 deletions(-)
rename app/loading.tsx => components/site-loading.tsx (94%)
diff --git a/app/layout.tsx b/app/layout.tsx
index 1ced27d..db79611 100644
--- 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>
diff --git a/components/nav.tsx b/components/nav.tsx
index 6615166..afc1530 100644
--- 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>
)
diff --git a/app/loading.tsx b/components/site-loading.tsx
similarity index 94%
rename from app/loading.tsx
rename to components/site-loading.tsx
index 57a5a5c..67ff238 100644
--- a/app/loading.tsx
+++ b/components/site-loading.tsx
@@ -1,6 +1,6 @@
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">
diff --git a/prisma/db.ts b/prisma/db.ts
index 51426ed..e67728c 100644
--- 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
--
GitLab