feat: top loader

added a loader at the top for better ux

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 />

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>
         ))}

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>

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>

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",