React Suspense Loader

A fully flexible React Suspense fallback Loader which uses Tailwind to render high quality css skeletons.

Motivation :gem:

Skeleton screens are a technique used to improve the user experience while content is loading. They show a rough layout of the content that is about to appear, which gives the user a sense of progress. This technique can make the loading process feel faster and more engaging.

More information can be found here - What's a skeleton screen ?

This library provides a default set of fallback loaders inspired by Flowbite and Tailwind

Quick Start :rocket:

Pre-requisites

Install suspense-loader npm package suspense-loader

npm i suspense-loader

Update tailwind.config.js file in the project.

  content: [
    .....
    "./node_modules/suspense-loader/dist/**/*.{js,ts,jsx,tsx}",
  ],

Usage :book:

SuspenseLoaderFlex applies flex styles by default on parent layout component.

 <SuspenseLoaderFlex count={1} type="card">
        <AsyncComponent />
  </SuspenseLoaderFlex>

Use SuspenseLoader for more flexibility in layout styling.

 <SuspenseLoader count={1} type="card" layoutClassName="grid gap-5">
        <AsyncComponent />
  </SuspenseLoader>

Props

All props are optional.

Demo