← back to Wine Finder Next

components/SkeletonLoader.tsx

51 lines

export default function SkeletonLoader() {
  return (
    <div className="bg-white rounded-2xl shadow-md overflow-hidden animate-pulse">
      {/* Image Skeleton */}
      <div className="h-72 bg-gradient-to-br from-gray-200 to-gray-300 relative overflow-hidden">
        <div
          className="absolute inset-0 bg-gradient-to-r from-transparent via-white to-transparent opacity-50 animate-shimmer"
          style={{
            backgroundSize: '1000px 100%',
          }}
        />
      </div>

      {/* Content Skeleton */}
      <div className="p-5 space-y-3">
        {/* Title */}
        <div className="space-y-2">
          <div className="h-5 bg-gray-200 rounded w-3/4" />
          <div className="h-4 bg-gray-200 rounded w-1/2" />
        </div>

        {/* Winery */}
        <div className="h-4 bg-gray-100 rounded w-2/3" />

        {/* Region */}
        <div className="h-4 bg-gray-100 rounded w-1/2" />

        {/* Tags */}
        <div className="flex gap-2">
          <div className="h-8 bg-purple-100 rounded-lg w-20" />
          <div className="h-8 bg-pink-100 rounded-lg w-24" />
        </div>

        {/* Price & Rating */}
        <div className="pt-2 border-t border-gray-200">
          <div className="flex items-center justify-between">
            <div className="h-8 bg-gray-200 rounded w-20" />
            <div className="h-8 bg-gray-100 rounded w-16" />
          </div>
        </div>

        {/* Source */}
        <div className="h-6 bg-gray-100 rounded w-24" />

        {/* CTA Button */}
        <div className="h-12 bg-gradient-to-r from-purple-200 to-pink-200 rounded-lg" />
      </div>
    </div>
  )
}