Landing page

src/components/Loader/AnimeInfo.loader.jsx

@@ -0,0 +1,58 @@
+import { Skeleton } from "@/src/components/ui/Skeleton/Skeleton";
+import CategoryCardLoader from "./CategoryCard.loader";
+import SidecardLoader from "./Sidecard.loader";
+
+const SkeletonItems = ({ count, className }) => (
+    [...Array(count)].map((_, index) => <Skeleton key={index} className={className} />)
+);
+
+function AnimeInfoLoader() {
+    return (
+        <>
+            <div className="relative grid grid-cols-[minmax(0,75%),minmax(0,25%)] h-fit w-full overflow-hidden mt-[64px] max-[1200px]:flex max-[1200px]:flex-col max-md:mt-[50px]">
+                <Skeleton className="absolute inset-0 w-full h-full blur-lg z-[-900] bg-gray-500" animation={false} />
+                <div className="flex items-start z-10 px-14 py-[70px] bg-[#252434] bg-opacity-70 gap-x-8 max-[1024px]:px-6 max-[1024px]:py-10 max-[1024px]:gap-x-4 max-[575px]:flex-col max-[575px]:items-center max-[575px]:justify-center">
+                    <Skeleton className="w-[200px] h-[270px] rounded-none" />
+                    <div className="flex flex-col ml-4 gap-y-5 w-full max-[575px]:items-center max-[575px]:justify-center max-[575px]:mt-0">
+                        <ul className="flex gap-x-2 items-center w-fit max-[1200px]:hidden">
+                            <SkeletonItems count={3} className="w-[40px] h-[15px] rounded-xl " />
+                        </ul>
+                        <div className="flex flex-col gap-y-2">
+                            <SkeletonItems count={2} className="w-[50%] h-[20px] rounded-xl " />
+                        </div>
+                        <div className="flex gap-x-[3px]">
+                            <SkeletonItems count={6} className="w-[30px] h-[20px] rounded-sm" />
+                        </div>
+                        <Skeleton className="w-[150px] h-[40px] rounded-3xl mt-4" />
+                        <div className="flex flex-col gap-y-2 mt-5 max-[575px]:hidden">
+                            <SkeletonItems count={3} className="w-[80%] h-[15px] rounded-3xl " />
+                        </div>
+                        <div className="flex gap-x-4 items-center mt-4">
+                            <Skeleton className="w-[60px] h-[60px] rounded-full bg-gray-500 max-[575px]:hidden" />
+                            <div className="flex flex-col w-fit gap-y-2">
+                                <SkeletonItems count={2} className="w-[150px] h-[10px] rounded-xl " />
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div className="bg-[#4c4b57c3] flex items-center px-8 max-[1200px]:py-10 max-[1200px]:bg-[#363544e0] max-[575px]:p-4">
+                    <div className="w-full flex flex-col h-fit gap-y-4">
+                        <SkeletonItems count={6} className="w-full h-[15px] rounded-xl" />
+                        <div className="flex gap-x-4 py-2 mt-4">
+                            <Skeleton className="w-[50px] h-[20px] " />
+                            <div className="flex flex-wrap gap-1">
+                                <SkeletonItems count={4} className="w-[30px] h-[20px] rounded-sm bg-gray-500" />
+                            </div>
+                        </div>
+                        <SkeletonItems count={2} className="w-[90%] h-[15px] rounded-xl  " />
+                    </div>
+                </div>
+            </div>
+            <div className="w-full grid grid-cols-[minmax(0,75%),minmax(0,25%)] gap-x-6 max-[1200px]:flex flex-col px-4">
+                <CategoryCardLoader className="mt-[60px]"/>
+                <SidecardLoader className="mt-[60px]" />
+            </div>
+        </>
+    );
+}
+export default AnimeInfoLoader;

src/components/Loader/AtoZ.loader.jsx

@@ -0,0 +1,26 @@
+import { Skeleton } from "../ui/Skeleton/Skeleton";
+import CategoryCardLoader from "./CategoryCard.loader";
+
+const SkeletonItems = ({ count, className }) => (
+    [...Array(count)].map((_, index) => <Skeleton key={index} className={className} />)
+);
+
+function AtoZLoader() {
+    return (
+        <div className="max-w-[1260px] mx-auto px-[15px] flex flex-col mt-[64px] max-md:mt-[50px]">
+            <ul className="flex gap-x-4 mt-[50px] items-center w-fit max-[1200px]:hidden">
+                <Skeleton className="w-[50px] h-[15px]" />
+                <Skeleton className="w-[70px] h-[15px]" />
+            </ul>
+            <div className="flex flex-col gap-y-5 mt-6">
+                <Skeleton className="w-[200px] h-[15px]" />
+                <div className='flex gap-x-[7px] flex-wrap justify-start gap-y-2 max-md:justify-start'>
+                    <SkeletonItems count={20} className="w-[40px] h-[20px] rounded-sm"/>
+                </div>
+            </div>
+            <CategoryCardLoader showLabelSkeleton={false}/>
+        </div >
+    );
+}
+
+export default AtoZLoader;

src/components/Loader/Cart.loader.jsx

@@ -0,0 +1,27 @@
+import { Skeleton } from "../ui/Skeleton/Skeleton"
+const SkeletonItems = ({ count, className }) => (
+    [...Array(count)].map((_, index) => <Skeleton key={index} className={className} />)
+);
+function CartLoader() {
+    return (
+        <div className="flex flex-col w-1/4 space-y-7 max-[1200px]:w-full">
+            <Skeleton className="w-[200px] h-[20px]" />
+            <div className='w-full space-y-4 flex flex-col '>
+                {[...Array(5)].map((item, index) => (
+                    <div key={index} style={{ borderBottom: "1px solid rgba(255, 255, 255, .075)" }} className="flex pb-4 items-center">
+                        <Skeleton className="w-[60px] h-[75px] rounded-none" />
+                        <div className='flex flex-col ml-4 space-y-2 w-full'>
+                            <Skeleton className='w-[90%] h-[15px]' />
+                            <div className='flex items-center w-fit space-x-1'>
+                                <SkeletonItems count={3} className="w-[30px] h-[15px]" />
+                            </div>
+                        </div>
+                    </div>
+                ))}
+            </div>
+            <Skeleton className='w-[100px] h-[30px]' />
+        </div>
+    )
+}
+
+export default CartLoader

src/components/Loader/Category.loader.jsx

@@ -0,0 +1,23 @@
+import { Skeleton } from "../ui/Skeleton/Skeleton"
+import CategoryCardLoader from "./CategoryCard.loader"
+import SidecardLoader from "./Sidecard.loader"
+
+function CategoryLoader() {
+    return (
+        <div className='w-full flex flex-col gap-y-4 mt-[64px] max-md:mt-[50px]'>
+            <div className="flex gap-x-4 items-center p-5 mt-4">
+                <Skeleton className="w-[60px] h-[60px] rounded-full bg-gray-500 max-[575px]:hidden" />
+                <div className="flex flex-col w-fit gap-y-2">
+                    <Skeleton className="w-[150px] h-[10px] rounded-xl " />
+                    <Skeleton className="w-[150px] h-[10px] rounded-xl " />
+                </div>
+            </div>
+            <div className="w-full px-4 grid grid-cols-[minmax(0,75%),minmax(0,25%)] gap-x-6 max-[1200px]:flex max-[1200px]:flex-col max-[1200px]:gap-y-10">
+                <CategoryCardLoader className={"mt-[0px]"} />
+                <SidecardLoader />
+            </div>
+        </div>
+    )
+}
+
+export default CategoryLoader

src/components/Loader/CategoryCard.loader.jsx

@@ -0,0 +1,35 @@
+import { Skeleton } from "../ui/Skeleton/Skeleton";
+
+function CategoryCardLoader({ className, showLabelSkeleton = true }) {
+  return (
+    <div className={`w-full ${className}`}>
+      {showLabelSkeleton && (
+        <Skeleton className="w-[200px] h-[20px] max-[320px]:w-[70px]" />
+      )}
+      <div className="grid grid-cols-6 gap-x-3 gap-y-8 mt-6 max-[1400px]:grid-cols-4 max-[758px]:grid-cols-3 max-[478px]:grid-cols-2">
+        {[...Array(12)].map((_, index) => (
+          <div
+            key={index}
+            className="flex flex-col"
+            style={{ height: "fit-content" }}
+          >
+            <div className="w-full relative">
+              <Skeleton className="w-full h-[250px] object-cover max-[1200px]:h-[35vw] max-[758px]:h-[45vw] max-[478px]:h-[60vw] rounded-none" />
+              <div className="absolute left-2 bottom-4 flex items-center justify-center w-fit space-x-1 z-20 max-[320px]:w-[80%] max-[320px]:left-0">
+                <Skeleton className="w-[50px] h-[15px] bg-gray-600 max-[320px]:w-[40%]" />
+                <Skeleton className="w-[50px] h-[15px] bg-gray-600 max-[320px]:w-[40%]" />
+              </div>
+            </div>
+            <Skeleton className="mt-1 w-[90%] h-[15px]" />
+            <div className="flex items-center gap-x-2 w-full mt-2">
+              <Skeleton className="w-[40%] h-[12px]" />
+              <Skeleton className="w-[40%] h-[12px]" />
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export default CategoryCardLoader;

src/components/Loader/Home.loader.jsx

@@ -0,0 +1,32 @@
+import CartLoader from "./Cart.loader";
+import CategoryCardLoader from "./CategoryCard.loader";
+import SidecardLoader from "./Sidecard.loader";
+import SpotlightLoader from "./Spotlight.loader";
+import Trendingloader from "./Trending.loader";
+function HomeLoader() {
+  return (
+    <div className="px-4 w-full h-full  max-[1200px]:px-0 bg-[#3a395100]">
+      <SpotlightLoader />
+      <Trendingloader />
+      <div className="mt-16 flex gap-6 max-[1200px]:px-4 max-[1200px]:grid max-[1200px]:grid-cols-2 max-[1200px]:mt-12 max-[1200px]:gap-y-10 max-[680px]:grid-cols-1">
+        <CartLoader />
+        <CartLoader />
+        <CartLoader />
+        <CartLoader />
+      </div>
+      <div className="w-full grid grid-cols-[minmax(0,75%),minmax(0,25%)] gap-x-6 max-[1200px]:flex flex-col max-[1200px]:px-4">
+        <div>
+          <CategoryCardLoader className="mt-[60px]" />
+          <CategoryCardLoader className="mt-[60px]" />
+          <CategoryCardLoader className="mt-[60px]" />
+        </div>
+        <div className="w-full mt-[60px]">
+          <SidecardLoader />
+          <SidecardLoader />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default HomeLoader;

src/components/Loader/Loader.jsx

@@ -0,0 +1,24 @@
+import AnimeInfoLoader from "./AnimeInfo.loader";
+import HomeLoader from "./Home.loader";
+import CategoryLoader from "./Category.loader";
+import AtoZLoader from "./AtoZ.loader";
+import ProducerLoader from "./Producer.loader";
+
+const Loader = ({ type }) => {
+  switch (type) {
+    case "home":
+      return <HomeLoader />;
+    case "animeInfo":
+      return <AnimeInfoLoader />;
+    case "category":
+      return <CategoryLoader />;
+    case "producer":
+      return <ProducerLoader />;
+    case "AtoZ":
+      return <AtoZLoader />;
+    default:
+      return <div className="loading-skeleton default-skeleton"></div>;
+  }
+};
+
+export default Loader;

src/components/Loader/Producer.loader.jsx

@@ -0,0 +1,15 @@
+import CategoryCardLoader from "./CategoryCard.loader";
+import SidecardLoader from "./Sidecard.loader";
+
+function ProducerLoader() {
+  return (
+    <div className="w-full mt-[100px] flex flex-col gap-y-4 max-md:mt-[50px]">
+      <div className="w-full px-4 grid grid-cols-[minmax(0,75%),minmax(0,25%)] gap-x-6 max-[1200px]:flex max-[1200px]:flex-col max-[1200px]:gap-y-10">
+        <CategoryCardLoader className={"mt-[0px]"} />
+        <SidecardLoader />
+      </div>
+    </div>
+  );
+}
+
+export default ProducerLoader;

src/components/Loader/Sidecard.loader.jsx

@@ -0,0 +1,26 @@
+import { Skeleton } from "../ui/Skeleton/Skeleton";
+function SidecardLoader({ className }) {
+    return (
+        <div className={`flex flex-col space-y-6 ${className}`}>
+            <Skeleton className='w-[200px] h-[15px]' />
+            <div className='flex flex-col space-y-4 bg-[#2B2A3C] p-4 pt-8 w-full'>
+                {[...Array(10)].map((_, index) => (
+                    <div key={index} className='flex items-center gap-x-4'>
+                        <div className="flex pb-4 relative container items-center">
+                            <Skeleton className="w-[60px] h-[75px] rounded-md" />
+                            <div className='flex flex-col ml-4 space-y-2 w-[60%]'>
+                                <Skeleton className='w-[90%] h-[15px]' />
+                                <div className='flex flex-wrap items-center space-x-1'>
+                                    <Skeleton className="w-[30%] h-[15px]" />
+                                    <Skeleton className="w-[30%] h-[15px]" />
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                ))}
+            </div>
+        </div>
+    );
+}
+
+export default SidecardLoader;

src/components/Loader/Spotlight.loader.jsx

@@ -0,0 +1,34 @@
+import { Skeleton } from "../ui/Skeleton/Skeleton"
+const SkeletonItems = ({ count, className }) => (
+    [...Array(count)].map((_, index) => <Skeleton key={index} className={className} />)
+);
+function SpotlightLoader() {
+    return (
+        <section className="w-full h-[600px] max-[1390px]:h-[530px] max-[1300px]:h-[500px] max-md:h-[420px] relative">
+            <div className="absolute flex flex-col left-0 bottom-[100px] w-[55%] p-4 z-10 max-[1390px]:w-[45%] max-[1390px]:bottom-[10px] max-[1300px]:w-[600px] max-[1120px]:w-[60%] max-md:w-[90%] max-[300px]:w-full">
+                <Skeleton className="w-[400px] h-[20px] max-md:w-[180px]" />
+                <Skeleton className="w-[70%] h-[20px] mt-6 text-left max-[1300px]:mt-4  max-sm:w-[80%] max-[320px]:w-full " />
+                <div className="flex h-fit justify-center items-center w-fit space-x-5 mt-8 max-[1300px]:mt-6 max-md:hidden">
+                    <SkeletonItems count={2} className="w-[30px] h-[15px]" />
+                    <div className="flex space-x-3 w-fit">
+                        <Skeleton className="w-[80px] h-[15px]" />
+                        <div className='flex space-x-[1px] rounded-r-[5px] rounded-l-[5px] w-fit py-[1px] overflow-hidden'>
+                            <SkeletonItems count={2} className="w-[30px] h-[15px]" />
+                        </div>
+                    </div>
+                </div>
+                <div className="mt-6 max-[1300px]:w-[500px] flex flex-col gap-y-2 max-[1120px]:w-[90%] max-md:hidden">
+                    <Skeleton className="w-full h-[13px]" />
+                    <Skeleton className="w-[85%] h-[13px]" />
+                    <Skeleton className="w-[70%] h-[13px]" />
+                </div>
+                <div className='flex gap-x-5 mt-10 max-md:mt-6 max-sm:w-full max-[320px]:flex-col max-[320px]:space-y-3'>
+                    <Skeleton className="w-[170px] h-[40px] max-[575px]:w-[120px] max-[575px]:h-[30px]" />
+                    <Skeleton className="w-[150px] h-[40px] max-[575px]:w-[120px] max-[575px]:h-[30px]" />
+                </div>
+            </div>
+        </section >
+    )
+}
+
+export default SpotlightLoader

src/components/Loader/Trending.loader.jsx

@@ -0,0 +1,34 @@
+import { useState, useEffect } from "react";
+import { Skeleton } from "../ui/Skeleton/Skeleton";
+
+function TrendingLoader() {
+    const [count, setCount] = useState(() => window.innerWidth < 720 ? 3 : window.innerWidth < 1300 ? 4 : 6);
+    useEffect(() => {
+        const updateCount = () => {
+            if (window.innerWidth < 720) {
+                setCount(3);
+            } else if (window.innerWidth < 1300) {
+                setCount(4);
+            } else {
+                setCount(6);
+            }
+        };
+        updateCount();
+        window.addEventListener("resize", updateCount);
+        return () => window.removeEventListener("resize", updateCount);
+    }, []);
+    return (
+        <div className="flex flex-col w-full mt-10 max-[1200px]:px-4">
+            <Skeleton className="w-[150px] h-[20px] max-[400px]:w-[100px]" />
+            <div className="w-full h-[250px] overflow-hidden flex mt-6 justify-around max-[1300px]:h-fit">
+                {[...Array(count)].map((_, index) => (
+                    <div key={index}>
+                        <Skeleton className="w-[200px] h-full rounded-none max-[1300px]:w-[22vw] max-[1300px]:h-[30vw] max-[720px]:w-[25vw] max-[720px]:h-[35vw]" />
+                    </div>
+                ))}
+            </div>
+        </div>
+    );
+}
+
+export default TrendingLoader;

src/components/Loader/VoiceActorlist.loader.jsx

@@ -0,0 +1,21 @@
+import { Skeleton } from "../ui/Skeleton/Skeleton"
+
+function VoiceActorlistLoader() {
+    return (
+        <div className="w-full h-fit grid grid-cols-2 gap-4 overflow-y-hidden max-sm:gap-2 max-md:h-[400px] max-md:flex max-md:flex-col">
+            {[...Array(10)].map((_, index) => (
+                <div key={index} className="h-[80px] p-4 rounded-md bg-[#444445]">
+                    <div className="flex h-full items-center gap-x-2">
+                        <Skeleton className="w-[45px] h-[45px] rounded-full max-sm:w-[30px] max-sm:h-[30px]" />
+                        <div className="flex flex-col gap-y-1">
+                            <Skeleton className="h-[10px] w-[100px] rounded-md max-[300px]:w-[50px] max-[300px]:h-[8px]" />
+                            <Skeleton className="h-[10px] w-[70px] rounded-md max-[300px]:w-[20px] max-[300px]:h-[8px]" />
+                        </div>
+                    </div>
+                </div>
+            ))}
+        </div>
+    )
+}
+
+export default VoiceActorlistLoader