Skip to Content
WebComponentCommonSkeleton-Loader

📘 What is SkeletonLoader?

SkeletonLoader is a utility component that shows a loading placeholder UI while real data (like movies, posters, or cards) is being fetched from the backend.

It prevents layout shifts and improves perceived performance by displaying grey blocks (skeletons) in place of content.

📦 When to Use It?

Use SkeletonLoader when you need to:

  • Load a grid of posters/cards from an API.
  • Delay rendering until data is fetched.
  • Show a loading experience that matches your actual UI layout (like OTT carousels or thumbnails).

🎯 Recommended Usage

Use SkeletonLoader with:

  • type="skeleton-card" for grid-style card layouts (e.g. movies, shows).
  • type="skeleton-slider" for banner carousels or hero sliders.

✅ Example: Card Grid with Posters

Below is a complete example of how to show SkeletonLoader while simulating an API call. Once loading is complete, it renders movie posters with titles.

"use client";
 
import React, { useEffect, useState } from "react";
import { SkeletonLoader } from "@zezosoft/zezo-ott-react-ui-kit";
 
// Dummy movie data with titles and posters
const dummyData = [
  {
    id: 1,
    title: "Inception",
    poster: "https://image.tmdb.org/t/p/w500/qmDpIHrmpJINaRKAfWQfftjCdyi.jpg",
  },
  {
    id: 2,
    title: "Interstellar",
    poster: "https://image.tmdb.org/t/p/w500/rAiYTfKGqDCRIIqo664sY9XZIvQ.jpg",
  },
  {
    id: 3,
    title: "The Dark Knight",
    poster: "https://image.tmdb.org/t/p/w500/qJ2tW6WMUDux911r6m7haRef0WH.jpg",
  },
  {
    id: 4,
    title: "Tenet",
    poster: "https://image.tmdb.org/t/p/w500/k68nPLbIST6NP96JmTxmZijEvCA.jpg",
  },
];
 
const CardList = () => {
  const [loading, setLoading] = useState(true);
  const [cards, setCards] = useState([]);
 
  useEffect(() => {
    // Simulate API call
    const timer = setTimeout(() => {
      setCards(dummyData);
      setLoading(false);
    }, 2000);
 
    return () => clearTimeout(timer);
  }, []);
 
  if (loading) {
    // 👇 Show Skeleton while loading
    return <SkeletonLoader type="skeleton-card" />;
  }
 
  return (
    <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-6 p-4">
      {cards.map((card) => (
        <div
          key={card.id}
          className="bg-gray-900 rounded-lg overflow-hidden border border-gray-700 shadow-md"
        >
          <img
            src={card.poster}
            alt={card.title}
            className="w-full h-auto aspect-[9/14] object-cover"
          />
          <div className="p-3">
            <h3 className="text-white text-sm font-semibold truncate">
              {card.title}
            </h3>
          </div>
        </div>
      ))}
    </div>
  );
};
 
export default CardList;
Last updated on
Content DetailsManage-Devices