Add: Toploader component for better page-load UX (#275)

package.json

@@ -41,6 +41,7 @@
     "next": "14.2.5",
     "next-auth": "^4.24.7",
     "next-themes": "^0.3.0",
+    "nextjs-toploader": "^1.6.12",
     "react": "^18",
     "react-dom": "^18",
     "react-hook-form": "^7.52.2",

src/app/layout.tsx

@@ -5,6 +5,7 @@ import Providers from '@/providers/providers';
 import type { Metadata } from 'next';
 import { Inter as FontSans } from 'next/font/google';
 import './globals.css';
+import TopLoader from '@/components/Toploader';
 
 const fontSans = FontSans({
   subsets: ['latin'],
@@ -29,6 +30,7 @@ export default async function RootLayout({
           fontSans.variable
         )}
       >
+        <TopLoader />
         <Providers>
           <Header />
           <main className="grow grid">{children}</main>

src/components/Toploader.tsx

@@ -0,0 +1,19 @@
+import NextTopLoader from 'nextjs-toploader';
+
+export default function TopLoader() {
+  return (
+    <>
+      <NextTopLoader
+        color="#2299DD"
+        initialPosition={0.08}
+        crawlSpeed={200}
+        height={3}
+        crawl={true}
+        showSpinner={true}
+        easing="ease"
+        speed={200}
+        shadow="0 0 10px $2299DD, 0 0 5px #2299DD"
+      />
+    </>
+  );
+}