Skeleton

Create a loading skeleton to give users a visual indication that content is being loaded. The Skeleton component is perfect for improving user experience during asynchronous data fetching.
const Skeleton = () => {

          return (

            <>

              <div role="status" className="space-y-2.5 animate-pulse max-w-lg">

                <div className="flex items-center w-full">

                  <div className="h-2.5 bg-indigo-300 rounded-full dark:bg-indigo-700 w-32"></div>

                  <div className="h-2.5 ms-2 bg-indigo-400 rounded-full dark:bg-indigo-600 w-24"></div>

                  <div className="h-2.5 ms-2 bg-indigo-400 rounded-full dark:bg-indigo-600 w-full"></div>

                </div>

                <div className="flex items-center w-full max-w-[480px]">

                  <div className="h-2.5 bg-indigo-300 rounded-full dark:bg-indigo-700 w-full"></div>

                  <div className="h-2.5 ms-2 bg-indigo-400 rounded-full dark:bg-indigo-600 w-full"></div>

                  <div className="h-2.5 ms-2 bg-indigo-400 rounded-full dark:bg-indigo-600 w-24"></div>

                </div>

              </div>

            </>

          )}

render(<Skeleton />);
Prev
Next