Demo

Placeholder with loading state

Import necessary components from the react-khatra-placeholder.

import {
  KhatraPlaceholder,
  PCard,
  PBlock,
  PInlineContainer,
  PLine,
} from "react-khatra-placeholder";

Example

const CustomPlaceholder = ({ animateWave, animateGlow }) => {
  return (
    <>
      {/* base component of placeholder, control animation of placeholder from here.*/}
      <PCard
        w="100%"
        animateWave={animateWave}
        animateGlow={animateGlow}
        style={{ padding: "1rem", border: "1px solid brown" }}
      >
        {/* creates rectangular block of given height and border radius.*/}
        <PBlock h="24px" w="35%" br="3px" style={{ marginBottom: "0.5rem" }} />
        {/* base component for creating paragraph lines.*/}
        <PInLineContainer br="3px" h="80%" w="98%">
          <PLine h="0.8rem" /> {/* creates lines, just like in paragraphs.*/}
          <PLine h="0.8rem" />
          <PLine h="0.8rem" w="60%" />
        </PInLineContainer>
      </PCard>
    </>
  );
};

const ToggleLoading = ({ isLoading, setIsLoading }) => {
  return (
    <button
      className="button button--primary"
      style={btnStyle}
      onClick={() => setIsLoading(!isLoading)}
    >
      Toggle Loading
    </button>
  );
};

export const YourContentPage = () => {
  // your content loading logic.
  const [isLoading, setIsLoading] = useState(false);
  return (
      <KhatraPlaceholder
        isLoading={isLoading}
        customPlaceholder={<CustomPlaceholder />}
        animateWave
      >
        <div>Your Beautiful content.</div>
        <div>
          Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quia, beatae
          laudantium cupiditate dolorem officia officiis veritatis qui mollitia
          nostrum voluptate similique, magnam quaerat error veniam quas omnis
          quasi? Sint, obcaecati.
        </div>
      </KhatraPlaceholder>
      <ToggleLoading isLoading={isLoading} setIsLoading={setIsLoading} />
  );
};

Other Custom Placeholders Demo Cards

Profile Card

<PCard
  w="400px"
  h="500px"
  br="12px"
  animateWave
  style={{ border: "0.5px solid grey" }}
>
  <PBlock w="100%" h="150px" br="12px" align="center" />
  <PInLineContainer justify="center">
    <PBlock
      w="100px"
      h="100px"
      rounded
      align="center"
      style={{
        position: "relative",
        top: "-5rem",
        marginBottom: "-5rem",
        border: "2px solid grey",
      }}
    />
    <PBlock w="75%" h="1rem" align="center" />
    <PBlock w="60%" h="0.8rem" align="center" />
    <PBlock w="60%" h="0.8rem" align="center" />
  </PInLineContainer>
  <PInLineContainer justify="center">
    <PBlock w="40%" h="2rem" />
    <PBlock w="40%" h="2rem" />
    <PBlock w="10%" h="2rem" />
  </PInLineContainer>
  <PInLineContainer gap="0.8rem" justify="center">
    <PLine w="20%" h="100px" />
    <PLine w="20%" h="100px" />
    <PLine w="20%" h="100px" />
    <PLine w="20%" h="100px" />
  </PInLineContainer>
</PCard>

Product Card

<PCard w="320px" h="400px" animateWave style={{ border: "0.5px solid grey" }}>
  <PBlock h="50%" br="12px" />
  <PInLineContainer justify="space-between" style={{ padding: "0.5rem 0" }}>
    <PBlock w="30%" h="1.5rem" />
    <PBlock w="20%" h="1.5rem" />
  </PInLineContainer>
  <PInLineContainer gap="0.3rem" br="3px">
    <PLine h="0.8rem" />
    <PLine w="70%" h="0.8rem" />
    <PLine w="80%" h="0.8rem" />
  </PInLineContainer>
  <PBlock w="30%" h="1.8rem" />
</PCard>

List Card

<PCard w="400px" h="400px" animateWave>
  <PInLineContainer gap="1rem">
    <PBlock w="80px" h="80px" br="12px" />
    <PInLineContainer w="60%" style={{ marginTop: "0.5rem" }}>
      <PLine w="100%" h="0.8rem" />
      <PLine w="60%" h="0.8rem" />
    </PInLineContainer>
  </PInLineContainer>
  <PInLineContainer gap="1rem">
    <PBlock w="80px" h="80px" br="12px" />
    <PInLineContainer w="60%" style={{ marginTop: "0.5rem" }}>
      <PLine w="100%" h="0.8rem" />
      <PLine w="60%" h="0.8rem" />
    </PInLineContainer>
  </PInLineContainer>
  <PInLineContainer gap="1rem">
    <PBlock w="80px" h="80px" br="12px" />
    <PInLineContainer w="60%" style={{ marginTop: "0.5rem" }}>
      <PLine w="100%" h="0.8rem" />
      <PLine w="60%" h="0.8rem" />
    </PInLineContainer>
  </PInLineContainer>
  <PInLineContainer gap="1rem">
    <PBlock w="80px" h="80px" br="12px" />
    <PInLineContainer w="60%" style={{ marginTop: "0.5rem" }}>
      <PLine w="100%" h="0.8rem" />
      <PLine w="60%" h="0.8rem" />
    </PInLineContainer>
  </PInLineContainer>
</PCard>

Mobile View

<PCard w="400px" h="720px" animateGlow style={{ border: "0.5px solid grey" }}>
  <PInLineContainer justify="space-between" style={{ marginBottom: "1rem" }}>
    <PBlock w="40%" h="2rem" />
    <PInLineContainer w="20%">
      <PBlock w="2rem" h="2rem" rounded />
      <PBlock w="2rem" h="2rem" rounded />
    </PInLineContainer>
  </PInLineContainer>

  <PInLineContainer justify="space-between" style={{ marginBottom: "1rem" }}>
    <PBlock w="4rem" h="2rem" />
    <PBlock w="4rem" h="2rem" />
    <PBlock w="4rem" h="2rem" />
    <PBlock w="4rem" h="2rem" />
    <PBlock w="4rem" h="2rem" />
  </PInLineContainer>

  <PInLineContainer>
    <PBlock w="2rem" h="2rem" rounded />
    <PLine w="85%" h="2rem" br="18px" />
  </PInLineContainer>

  <PInLineContainer gap="0.8rem">
    <PLine w="22%" h="120px" />
    <PLine w="22%" h="120px" />
    <PLine w="22%" h="120px" />
    <PLine w="22%" h="120px" />
  </PInLineContainer>

  <PInLineContainer>
    <PBlock w="2rem" h="2rem" rounded />
    <PInLineContainer w="50%">
      <PLine w="60%" h="0.8rem" br="3px" />
      <PLine w="40%" h="0.5rem" br="3px" />
      <PBlock w="0.5rem" h="0.5rem" rounded />
    </PInLineContainer>
    <PBlock h="300px" />
  </PInLineContainer>
</PCard>

Details Card

<PCard w="800px" h="400px" gap="1rem" animateGlow>
  <PBlock h="100%" br="12px" />
  <PInLineContainer justify="space-between">
    <PBlock w="50%" h="3rem" />
    <PInLineContainer w="30%">
      <PBlock w="3rem" h="3rem" rounded />
      <PBlock w="3rem" h="3rem" rounded />
      <PBlock w="3rem" h="3rem" rounded />
      <PBlock w="3rem" h="3rem" rounded />
    </PInLineContainer>
  </PInLineContainer>
  <PInLineContainer br="3px">
    <PLine h="1rem" />
    <PLine w="70%" h="1rem" />
    <PLine w="80%" h="1rem" />
  </PInLineContainer>
</PCard>

Description Card

<PCard w="400px" h="400px" animateGlow>
  <PBlock h="50%" br="8px" />
  <PInLineContainer br="3px">
    <PLine h="0.8rem" />
    <PLine h="0.8rem" />
    <PLine w="70%" h="0.8rem" />
    <PLine w="80%" h="0.8rem" />
  </PInLineContainer>
  <PBlock w="30%" h="1.8rem" br="3px" />
</PCard>