React Suspense Loader
A fully flexible React Suspense fallback Loader which uses Tailwind to render high quality css skeletons.
Motivation 💎
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 🚀
Pre-requisites
The library is compatible with React + Tailwind projects.
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 📖
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.
count - Provide the number of repetitions needed. Defaults to 1.
type - Accepts the type of fallback skeleton. Accepts "video" | "image" | "card" | "list"| ""
layoutClassName - CSS/Tailwind class names for the parent layout component.
placeholderClassName - CSS/Tailwind class names for the repeating child components.
Demo
