38 lines
1.8 KiB
TypeScript
38 lines
1.8 KiB
TypeScript
import React from 'react';
|
|
|
|
export const SkeletonFeed: React.FC = () => {
|
|
return (
|
|
<div className="h-full w-full bg-[#0f0f15] relative overflow-hidden flex items-center justify-center">
|
|
{/* Main Video Area Skeleton */}
|
|
<div className="absolute inset-0 flex items-center justify-center">
|
|
<div className="w-16 h-16 rounded-full skeleton-pulse opacity-50"></div>
|
|
</div>
|
|
|
|
{/* Right Sidebar Action Buttons */}
|
|
<div className="absolute right-4 bottom-24 flex flex-col items-center gap-6 z-10">
|
|
{[1, 2, 3, 4].map((_, i) => (
|
|
<div key={i} className="flex flex-col items-center gap-1">
|
|
<div className="w-12 h-12 rounded-full skeleton-pulse bg-white/10" />
|
|
<div className="w-8 h-3 rounded-md skeleton-pulse bg-white/10" />
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
{/* Bottom Info Area */}
|
|
<div className="absolute bottom-6 left-4 right-20 z-10 space-y-3">
|
|
<div className="w-32 h-5 rounded-md skeleton-pulse bg-white/10" />
|
|
<div className="w-64 h-4 rounded-md skeleton-pulse bg-white/10" />
|
|
<div className="w-48 h-4 rounded-md skeleton-pulse bg-white/10 opacity-70" />
|
|
|
|
{/* Music Skeleton */}
|
|
<div className="flex items-center gap-2 mt-2">
|
|
<div className="w-6 h-6 rounded-full skeleton-pulse bg-white/10" />
|
|
<div className="w-40 h-4 rounded-md skeleton-pulse bg-white/10" />
|
|
</div>
|
|
</div>
|
|
|
|
{/* Overlay Gradient */}
|
|
<div className="absolute inset-0 bg-gradient-to-b from-transparent via-transparent to-black/60 pointer-events-none" />
|
|
</div>
|
|
);
|
|
};
|