Add loading component with suspense on initial layout

alvinsjoy · Nov 17, 2024 · fabc5ca · fabc5ca
1 parent a53caac
commit fabc5ca
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 10 deletions.
diff --git a/app/(root)/layout.tsx b/app/(root)/layout.tsx
@@ -1,3 +1,4 @@
+import { Suspense } from 'react';
 import { ClerkProvider } from '@clerk/nextjs';
 import { Inter } from 'next/font/google';
 import { Metadata } from 'next';
@@ -10,6 +11,7 @@ import LeftSidebar from '@/components/shared/LeftSidebar';
 import Bottombar from '@/components/shared/Bottombar';
 import RightSidebar from '@/components/shared/RightSidebar';
 import Topbar from '@/components/shared/Topbar';
+import Loading from '@/components/shared/Loading';
 
 export const metadata: Metadata = {
   title: {
@@ -33,16 +35,18 @@ export default function RootLayout({
     >
       <html lang="en">
         <body className={inter.className}>
-          <Topbar />
-          <main className="flex flex-row">
-            <LeftSidebar />
-            <section className="main-container">
-              <div className="w-full max-w-4xl">{children}</div>
-            </section>
-            <RightSidebar />
-          </main>
-          <Bottombar />
-          <Toaster />
+          <Suspense fallback={<Loading />}>
+            <Topbar />
+            <main className="flex flex-row">
+              <LeftSidebar />
+              <section className="main-container">
+                <div className="w-full max-w-4xl">{children}</div>
+              </section>
+              <RightSidebar />
+            </main>
+            <Bottombar />
+            <Toaster />
+          </Suspense>
           <script
             defer
             src="https://cloud.umami.is/script.js"

diff --git a/components/shared/Loading.tsx b/components/shared/Loading.tsx
@@ -0,0 +1,12 @@
+import Image from 'next/image';
+
+function Loading() {
+  return (
+    <div className="flex flex-col items-center justify-center h-screen bg-dark-2">
+      <Image src="/assets/logo.png" alt="Loading" width={80} height={80} />
+      <Image src="/assets/loading.svg" alt="Loading" width={80} height={80} />
+    </div>
+  );
+}
+
+export default Loading;
diff --git a/public/assets/loading.svg b/public/assets/loading.svg