From 5779e9995dd80be00dbc3f12deb039afe79ec2a1 Mon Sep 17 00:00:00 2001
From: Abhishek <abhishekbhosale.dev@gmail.com>
Date: Sun, 28 Jul 2024 16:07:48 +0530
Subject: [PATCH] feat: top loader

added a loader at the top for better ux
---
 app/layout.js                                 |  2 ++
 .../FeatureSection/FeatureSectionGrid.jsx     |  8 ++++--
 components/HeroSection.jsx                    |  1 +
 components/Navbar.jsx                         |  2 +-
 package-lock.json                             | 25 +++++++++++++++++++
 package.json                                  |  1 +
 6 files changed, 36 insertions(+), 3 deletions(-)

diff --git a/app/layout.js b/app/layout.js
index 5273c16..7663713 100644
--- a/app/layout.js
+++ b/app/layout.js
@@ -4,6 +4,7 @@ import { ThemeProvider } from "../components/theme-provider";
 import Navbar from "../components/Navbar";
 import Footer from "../components/Footer";
 import AuthProvider from "../context/AuthProvider";
+import NextTopLoader from "nextjs-toploader";
 
 const inter = Inter({ subsets: ["latin"] });
 
@@ -23,6 +24,7 @@ export default function RootLayout({ children }) {
             enableSystem
             disableTransitionOnChange
           >
+            <NextTopLoader />
             <Navbar />
             <main className="mx-auto mt-10">{children}</main>
             <Footer />
diff --git a/components/FeatureSection/FeatureSectionGrid.jsx b/components/FeatureSection/FeatureSectionGrid.jsx
index 0d53333..5618990 100644
--- a/components/FeatureSection/FeatureSectionGrid.jsx
+++ b/components/FeatureSection/FeatureSectionGrid.jsx
@@ -112,6 +112,7 @@ export const SkeletonOne = () => {
             width={1000}
             height={1000}
             className="full rounded-sm"
+            draggable="false"
           />
         </div>
       </div>
@@ -149,6 +150,7 @@ export const SkeletonThree = () => {
             width={800}
             height={800}
             className="mt-2 object-cover object-center rounded-sm blur-none group-hover/image:blur-md transition-all duration-200"
+            draggable="false"
           />
         </div>
       </div>
@@ -202,10 +204,11 @@ export const SkeletonTwo = () => {
           >
             <Image
               src={image}
-              alt="bali images"
+              alt=""
               width="500"
               height="500"
               className="rounded-lg h-20 w-20 md:h-40 md:w-40 object-cover flex-shrink-0"
+              draggable="false"
             />
           </motion.div>
         ))}
@@ -224,10 +227,11 @@ export const SkeletonTwo = () => {
           >
             <Image
               src={image}
-              alt="bali images"
+              alt=""
               width="500"
               height="500"
               className="rounded-lg h-20 w-20 md:h-40 md:w-40 object-cover flex-shrink-0"
+              draggable="false"
             />
           </motion.div>
         ))}
diff --git a/components/HeroSection.jsx b/components/HeroSection.jsx
index e667b0f..7fa4d80 100644
--- a/components/HeroSection.jsx
+++ b/components/HeroSection.jsx
@@ -51,6 +51,7 @@ export default function HeroSection() {
           width={1200}
           className="mx-auto shadow-lg rounded-2xl"
           alt=""
+          draggable={false}
         />
       </div>
     </motion.section>
diff --git a/components/Navbar.jsx b/components/Navbar.jsx
index 2783f4f..5bdd10b 100644
--- a/components/Navbar.jsx
+++ b/components/Navbar.jsx
@@ -69,7 +69,7 @@ const Navbar = () => {
       {/* buttons */}
       <div className="hidden lg:flex items-center gap-5 transition-all">
         <Link href="https://discord.gg/AB2vCdyw">
-          <Button variant="outline" className="px-5 rounded-md border-indigo-800">
+          <Button variant="outline" className="px-5 rounded-md">
             Join Community
           </Button>
         </Link>
diff --git a/package-lock.json b/package-lock.json
index 2807e5e..ede353e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -37,6 +37,7 @@
         "next-auth": "^4.24.7",
         "next-sanity": "^9.4.2",
         "next-themes": "^0.3.0",
+        "nextjs-toploader": "^1.6.12",
         "prisma": "^5.16.1",
         "react": "^18",
         "react-dom": "^18",
@@ -11633,6 +11634,24 @@
         "node": "^10 || ^12 || >=14"
       }
     },
+    "node_modules/nextjs-toploader": {
+      "version": "1.6.12",
+      "resolved": "https://registry.npmjs.org/nextjs-toploader/-/nextjs-toploader-1.6.12.tgz",
+      "integrity": "sha512-nbun5lvVjlKnxLQlahzZ55nELVEduqoEXT03KCHnsEYJnFpI/3BaIzpMyq/v8C7UGU2NfxQmjq6ldZ310rsDqA==",
+      "license": "MIT",
+      "dependencies": {
+        "nprogress": "^0.2.0",
+        "prop-types": "^15.8.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/TheSGJ"
+      },
+      "peerDependencies": {
+        "next": ">= 6.0.0",
+        "react": ">= 16.0.0",
+        "react-dom": ">= 16.0.0"
+      }
+    },
     "node_modules/node-addon-api": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-5.1.0.tgz",
@@ -11759,6 +11778,12 @@
         "set-blocking": "^2.0.0"
       }
     },
+    "node_modules/nprogress": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/nprogress/-/nprogress-0.2.0.tgz",
+      "integrity": "sha512-I19aIingLgR1fmhftnbWWO3dXc0hSxqHQHQb3H8m+K3TnEn/iSeTZZOyvKXWqQESMwuUVnatlCnZdLBZZt2VSA==",
+      "license": "MIT"
+    },
     "node_modules/nth-check": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.1.1.tgz",
diff --git a/package.json b/package.json
index d33febc..75191aa 100644
--- a/package.json
+++ b/package.json
@@ -41,6 +41,7 @@
     "next-auth": "^4.24.7",
     "next-sanity": "^9.4.2",
     "next-themes": "^0.3.0",
+    "nextjs-toploader": "^1.6.12",
     "prisma": "^5.16.1",
     "react": "^18",
     "react-dom": "^18",