Skeleton Structure in Next jS

Skeleton is a placeholder to show a loading state and the expected shape of a component.

Firstly Need to import the module

import {Skeleton} from "@nextui-org/react";

Code for the skelton loading and loaded state with condition

import React from "react";
import {Card, Skeleton, Button} from "@nextui-org/react";


export default function App() {
  const [isLoaded, setIsLoaded] = React.useState(false);


  const toggleLoad = () => {
    setIsLoaded(!isLoaded);
  };


  return (
    <div className="flex flex-col gap-3">
      <Card className="w-[200px] space-y-5 p-4" radius="lg">
        <Skeleton isLoaded={isLoaded} className="rounded-lg">
          <div className="h-24 rounded-lg bg-secondary"></div>
        </Skeleton>
        <div className="space-y-3">
          <Skeleton isLoaded={isLoaded} className="w-3/5 rounded-lg">
            <div className="h-3 w-full rounded-lg bg-secondary"></div>
          </Skeleton>
          <Skeleton isLoaded={isLoaded} className="w-4/5 rounded-lg">
            <div className="h-3 w-full rounded-lg bg-secondary-300"></div>
          </Skeleton>
          <Skeleton isLoaded={isLoaded} className="w-2/5 rounded-lg">
            <div className="h-3 w-full rounded-lg bg-secondary-200"></div>
          </Skeleton>
        </div>
      </Card>
      <Button size="sm" variant="flat" color="secondary" onPress={toggleLoad}>
        {isLoaded ? "Show" : "Hide"} Skeleton
      </Button>
    </div>
  );
}