From b1effe1b5b8e541ccb98833beefa6a6f281a6007 Mon Sep 17 00:00:00 2001
From: Tejas Panchal <tejaspanchal127@gmail.com>
Date: Sun, 10 Aug 2025 13:22:25 +0530
Subject: [PATCH] sidecard

---
 src/components/Loader/Sidecard.loader.jsx | 26 ++++++++++++-----------
 1 file changed, 14 insertions(+), 12 deletions(-)

diff --git a/src/components/Loader/Sidecard.loader.jsx b/src/components/Loader/Sidecard.loader.jsx
index 8f9d7d5..48f2413 100644
--- a/src/components/Loader/Sidecard.loader.jsx
+++ b/src/components/Loader/Sidecard.loader.jsx
@@ -1,18 +1,20 @@
 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 className={`bg-[#141414] rounded-lg p-6 ${className}`}>
+            <h2 className="text-xl font-semibold mb-4 text-white">Related Anime</h2>
+            <div className="flex flex-col space-y-2 max-h-[600px] overflow-y-auto pr-2 scrollbar-thin scrollbar-track-[#1a1a1a] scrollbar-thumb-[#2a2a2a] hover:scrollbar-thumb-[#333] scrollbar-thumb-rounded">
+                {[...Array(8)].map((_, index) => (
+                    <div key={index} className="group">
+                        <div className="flex items-start gap-3 p-2 rounded-lg transition-colors hover:bg-[#1f1f1f]">
+                            <Skeleton className="w-[50px] h-[70px] rounded object-cover flex-shrink-0" />
+                            <div className="flex flex-col gap-1.5 flex-1 min-w-0">
+                                <Skeleton className="w-[85%] h-[14px]" />
+                                <div className="flex flex-wrap items-center gap-2">
+                                    <Skeleton className="w-[45px] h-[18px] rounded" />
+                                    <Skeleton className="w-[45px] h-[18px] rounded" />
+                                    <Skeleton className="w-[60px] h-[16px] rounded" />
                                 </div>
                             </div>
                         </div>