Added loading.

Author: abhitrueprogrammer

package.json

@@ -51,6 +51,7 @@
     "react-dom": "^18.3.0",
     "react-dropzone": "^14.2.3",
     "react-hot-toast": "^2.4.1",
+    "react-icons": "^5.3.0",
     "tailwind-merge": "^2.5.3",
     "tailwindcss-animate": "^1.0.7",
     "use-debounce": "^10.0.3",

pnpm-lock.yaml

@@ -402,7 +402,7 @@ function Upload() {
   }
 
   if (!tag) {
-    return <div>Loading...</div>;
+    return <div>.</div>;
   }
 
   return (

src/app/adminupload/page.tsx

@@ -3,12 +3,17 @@
 import CatalogueContent from "@/components/CatalogueContent";
 import { Suspense } from "react";
 import Navbar from "@/components/Navbar";
-
+import { RiLoader2Fill } from "react-icons/ri";
+import Loader from "@/components/ui/loader";
 const Catalogue = () => {
   return (
     <>
       <Navbar />
-      <Suspense fallback={<div>Loading catalogue...</div>}>
+      <Suspense
+        fallback={
+          <Loader />
+        }
+      >
         <CatalogueContent />
       </Suspense>
     </>

src/app/catalogue/page.tsx

@@ -9,6 +9,8 @@ import Card from "./Card";
 import { extractBracketContent } from "@/util/utils";
 import { useRouter } from "next/navigation";
 import SearchBar from "./searchbar";
+import { RiLoader2Fill } from "react-icons/ri";
+import Loader from "./ui/loader";
 
 const cryptr = new Cryptr(
   process.env.NEXT_PUBLIC_CRYPTO_SECRET ?? "default_crypto_secret",
@@ -168,7 +170,7 @@ const CatalogueContent = () => {
 
   return (
     <div className="min-h-screen px-2 md:p-8">
-      <div className="mb-4 flex flex-row w-full items-center md:justify-center md:gap-10">
+      <div className="mb-4 flex w-full flex-row items-center md:justify-center md:gap-10">
         <div className="w-[120%] md:w-[576px]">
           <SearchBar />
         </div>
@@ -187,10 +189,11 @@ const CatalogueContent = () => {
 
       {error && <p className="text-red-500">{error}</p>}
       {loading ? (
-        <p>Loading papers...</p>
+           <Loader />
+
       ) : papers.length > 0 ? (
         <>
-          <div className="mb-4 2xl:mr-4 flex justify-center md:justify-end gap-2">
+          <div className="mb-4 flex justify-center gap-2 md:justify-end 2xl:mr-4">
             <Button variant="outline" onClick={handleSelectAll}>
               Select All
             </Button>
@@ -205,7 +208,7 @@ const CatalogueContent = () => {
               Download All ({selectedPapers.length})
             </Button>
           </div>
-          <div className="flex flex-col items-center justify-center md:justify-normal md:flex-row flex-wrap mx-auto gap-10">
+          <div className="mx-auto flex flex-col flex-wrap items-center justify-center gap-10 md:flex-row md:justify-normal">
             {papers.map((paper) => (
               <Card
                 key={paper._id}

src/components/CatalogueContent.tsx

@@ -10,9 +10,9 @@ import Link from "next/link";
 
 export default function Footer() {
   return (
-    <div className="mx-auto flex flex-col items-center justify-between gap-y-12 pt-12 md:w-full md:flex-row md:px-12">
+    <div className="mx-auto flex flex-col items-center justify-between gap-y-12 pt-12 lg:w-full lg:flex-row lg:px-12">
       <div className="flex items-center">
-        <h1 className="jost bg-gradient-to-r from-[#562EE7] to-[#FFC6E8] bg-clip-text text-center text-3xl font-bold text-transparent md:text-5xl">
+        <h1 className="jost bg-gradient-to-r from-[#562EE7] to-[#FFC6E8] bg-clip-text text-center text-3xl font-bold text-transparent lg:text-5xl">
           Papers
         </h1>
         <Separator orientation="vertical" className="mx-3 h-full min-h-20" />
@@ -23,40 +23,40 @@ export default function Footer() {
             height={70}
             width={70}
           />
-          <p className="jost text-2xl font-bold md:text-4xl">CodeChef-VIT</p>
+          <p className="jost text-2xl font-bold lg:text-4xl">CodeChef-VIT</p>
         </div>
       </div>
 
-      <p className="hidden text-xl md:block">Made with Love By Codechef-VIT</p>
+      <p className="hidden text-xl lg:block">Made with Love By Codechef-VIT</p>
       <div className="flex items-center gap-x-8">
-        <a href="https://www.instagram.com/codechefvit/">
+        <Link href="https://www.instagram.com/codechefvit/">
           <Instagram />
-        </a>
-        <a href="https://www.linkedin.com/company/codechefvit/">
+        </Link>
+        <Link href="https://www.linkedin.com/company/codechefvit/">
           <Linkedin />
-        </a>
-        <a href="https://www.youtube.com/@CodeChefVIT">
+        </Link>
+        <Link href="https://www.youtube.com/@CodeChefVIT">
           <Youtube />
-        </a>
-        <a href="https://www.facebook.com/codechefvit/">
+        </Link>
+        <Link href="https://www.facebook.com/codechefvit/">
           <Image
             src={meta_icon}
             alt="meta-icon"
             height={24}
             width={24}
             className="dark:hidden"
           />
-        </a>
+        </Link>
 
-        <a href="https://www.facebook.com/codechefvit/">
+        <Link href="https://www.facebook.com/codechefvit/">
           <Image
             src={meta_icon_dark}
             alt="meta-icon"
             className="hidden dark:block"
             height={24}
             width={24}
           />
-        </a>
+        </Link>
         <Link href="https://x.com/codechefvit">
           <Image
             src={x_twitter_icon}
@@ -77,7 +77,7 @@ export default function Footer() {
           />
         </Link>
       </div>
-      <p className="block text-xl md:hidden">Made with Love By Codechef-VIT</p>
+      <p className="block text-xl lg:hidden">Made with Love By Codechef-VIT</p>
     </div>
   );
 }

src/components/Footer.tsx

@@ -9,7 +9,7 @@ function Navbar() {
   return (
     <div className="flex items-center justify-between px-4 py-6 md:px-12">
       <div className="hiddaen w-[20%] md:block">
-        <a href="https://www.codechefvit.com/">
+        <a href="https://www.codechefvit.com/" className="inline-block">
           <Image
             src={ccLogo as HTMLImageElement}
             alt="codechef-logo"
@@ -18,9 +18,11 @@ function Navbar() {
           />
         </a>
       </div>
-      <Link href="/" className="jost bg-gradient-to-r from-[#562EE7] to-[#FFC6E8] bg-clip-text text-center text-5xl font-bold text-transparent md:w-[60%] md:text-6xl">
-        Papers
-      </Link>
+      <div>
+        <Link href="/"  className="jost bg-gradient-to-r from-[#562EE7] to-[#FFC6E8] bg-clip-text text-center text-5xl font-bold text-transparent md:w-[60%] md:text-6xl">
+          Papers
+        </Link>
+      </div>
       <div className="flex items-center justify-end gap-x-2 md:w-[20%]">
         <div className="hidden md:block">
           <ModeToggle />

src/components/Navbar.tsx

@@ -0,0 +1,14 @@
+const Loader = () => {
+    return (
+      <div className="m-52 flex justify-center items-center bg-gradient-to-br ">
+        <div className="relative">
+          <div className="absolute inset-0 rounded-full bg-gradient-to-r from-white to-transparent opacity-30 animate-ping"></div>
+          <div className="animate-spin rounded-full h-20 w-20 border-t-4 border-b-4 border-transparent border-t-white border-b-gray-800 shadow-lg"></div>
+          <div className="absolute inset-4 rounded-full bg-gradient-to-br from-[#262626] to-[#333333] shadow-inner"></div>
+          <div className="absolute inset-7 rounded-full bg-white shadow-lg animate-pulse"></div>
+        </div>
+      </div>
+    );
+  };
+  
+  export default Loader;