shishantbiswas/JustAnime
1
0
Fork 0
mirror of https://github.com/JustAnimeCore/JustAnime.git synced 2026-04-18 06:11:45 +00:00
Code Issues Packages Projects Releases Wiki Activity

skeletons

Browse Source
This commit is contained in:
Tejas Panchal
2025-08-10 13:06:56 +05:30
parent 7f86a9e8a6
commit 4b8f538118
4 changed files with 26 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
src/components/Loader/Spotlight.loader.jsx
View File

@@ -5,26 +5,27 @@ const SkeletonItems = ({ count, className }) => (
function SpotlightLoader() {
return (
<section className="w-full h-[600px] max-[1390px]:h-[530px] max-[1300px]:h-[500px] max-md:h-[420px] relative">
<Skeleton className="absolute inset-0 w-full h-full rounded-none" />
<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 " />
<Skeleton className="w-[450px] h-[32px] max-md:w-[200px] max-md:h-[24px]" />
<Skeleton className="w-[70%] h-[24px] mt-6 text-left max-[1300px]:mt-4 max-sm:w-[80%] max-[320px]:w-full max-md:h-[20px]" />
<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]" />
<SkeletonItems count={2} className="w-[40px] h-[20px]" />
<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]" />
<Skeleton className="w-[90px] h-[20px]" />
<div className='flex space-x-[2px] rounded-r-[5px] rounded-l-[5px] w-fit py-[1px] overflow-hidden'>
<SkeletonItems count={2} className="w-[35px] h-[20px]" />
</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 className="mt-6 max-[1300px]:w-[500px] flex flex-col gap-y-3 max-[1120px]:w-[90%] max-md:hidden">
<Skeleton className="w-full h-[16px]" />
<Skeleton className="w-[85%] h-[16px]" />
<Skeleton className="w-[70%] h-[16px]" />
</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]" />
<Skeleton className="w-[180px] h-[45px] max-[575px]:w-[130px] max-[575px]:h-[35px]" />
<Skeleton className="w-[160px] h-[45px] max-[575px]:w-[130px] max-[575px]:h-[35px]" />
</div>
</div>
</section >

10
src/components/Loader/Trending.loader.jsx
View File

@@ -19,11 +19,13 @@ function TrendingLoader() {
}, []);
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">
<Skeleton className="w-[180px] h-[28px] max-[400px]:w-[120px] max-[400px]:h-[24px]" />
<div className="w-full h-[250px] overflow-hidden flex mt-6 justify-around max-[1300px]:h-fit gap-x-4">
{[...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 key={index} className="flex flex-col gap-y-2">
<Skeleton className="w-[200px] h-[250px] rounded-md max-[1300px]:w-[22vw] max-[1300px]:h-[30vw] max-[720px]:w-[25vw] max-[720px]:h-[35vw]" />
<Skeleton className="w-[180px] h-[20px] max-[1300px]:w-[20vw] max-[720px]:w-[22vw]" />
<Skeleton className="w-[140px] h-[16px] max-[1300px]:w-[15vw] max-[720px]:w-[18vw]" />
</div>
))}
</div>

12
src/components/Loader/VoiceActorlist.loader.jsx
View File

@@ -4,12 +4,12 @@ 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 key={index} className="h-[90px] p-4 rounded-md bg-[#444445] hover:bg-[#4f4f50] transition-colors">
<div className="flex h-full items-center gap-x-3">
<Skeleton className="w-[55px] h-[55px] rounded-full max-sm:w-[40px] max-sm:h-[40px]" />
<div className="flex flex-col gap-y-2">
<Skeleton className="h-[16px] w-[120px] rounded-md max-[300px]:w-[80px] max-[300px]:h-[14px]" />
<Skeleton className="h-[14px] w-[80px] rounded-md max-[300px]:w-[60px] max-[300px]:h-[12px]" />
</div>
</div>
</div>