Index file of code sample used in the following article: Building loading screens with KendoReact’s Skeleton component

index.js

import React from "react";
import ReactDOM from "react-dom/client";
import { Skeleton } from "@progress/kendo-react-indicators";
import {
  Avatar,
  Card,
  CardTitle,
  CardSubtitle,
  CardHeader,
  CardImage,
  CardFooter,
} from "@progress/kendo-react-layout";
import "./index.scss";

const CardElement = ({
  loading,
  avatar,
  title,
  subtitle,
  thumbnail,
  description,
}) => {
  const cardAvatar = loading ? (
    <Skeleton
      shape={"circle"}
      style={{
        width: 45,
        height: 45,
        marginRight: 16,
      }}
    />
  ) : (
    <Avatar type={"image"} shape={"circle"}>
      <img alt="User Avatar" src={avatar} />
    </Avatar>
  );

  const cardTitle = loading ? (
    <Skeleton
      shape={"text"}
      style={{
        width: "100%",
      }}
    />
  ) : (
    <CardTitle>{title}</CardTitle>
  );

  const cardSubtitle = loading ? (
    <Skeleton
      shape={"text"}
      style={{
        width: "40%",
      }}
    />
  ) : (
    <CardSubtitle
      style={{
        marginTop: 0,
      }}
    >
      {subtitle}
    </CardSubtitle>
  );

  const cardImage = loading ? (
    <Skeleton
      shape={"rectangle"}
      style={{
        width: "100%",
        height: 230,
      }}
    />
  ) : (
    <CardImage src={thumbnail} />
  );

  const cardFooter = loading ? (
    <CardFooter>
      <Skeleton
        shape={"text"}
        style={{
          width: "100%",
        }}
      />
    </CardFooter>
  ) : (
    <CardFooter>{description}</CardFooter>
  );

  return (
    <Card
      style={{
        minWidth: 350,
        width: 350,
        height: "auto",
      }}
    >
      <CardHeader className="k-hbox">
        {cardAvatar}
        <div
          style={{
            flex: "1 1 50%",
          }}
        >
          {cardTitle}
          {cardSubtitle}
        </div>
      </CardHeader>
      {cardImage}
      {cardFooter}
    </Card>
  );
};

const App = () => {
  const [cardData, setCardData] = React.useState(undefined);
  const [cardLoading, setCardLoading] = React.useState(true);

  React.useEffect(() => {
    // simulate an API call to get the content
    setTimeout(() => {
      const updatedCardData = {
        avatar:
          "https://d585tldpucybw.cloudfront.net/sfimages/default-source/blogs/author-images/hassan_djirdeh_profile_photo.png?sfvrsn=3f0d3926_3",
        title: "Hassan Djirdeh",
        subtitle: "2 hours ago",
        thumbnail:
          "https://images.unsplash.com/photo-1486325212027-8081e485255e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2070&q=80",
        description: "Check out this view of downtown TO!",
      };
      setCardData(updatedCardData);
      setCardLoading(false);
    }, 2000);
  }, []);

  return <CardElement loading={cardLoading} {...cardData} />;
};

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);