Objective
Define the types of loaders, how they should be presented to users.
User Interaction and Design
| Error Type | Description | Handling | Designs | Tailwind Component |
|---|---|---|---|---|
| Card Shimmers / Skeleton Loaders | Card / Table / Structure of data is known, and a skeleton is shown while the data is being loaded. | As soon as the screens loads, by default it should have shimmers (No blank screen) Shimmer cards should match the UI which is to be expected. Individual shimmers of individual card / component should we available and they can be replaced with actual content async. | Animation – Tailwind CSS | |
| Button Loader | Button from which API(s) are triggered and eithernext step is only possible after itOr user cannot click again on it | As soon as the button is clicked the loader will appear on the Right side of the text and button should look active and should not be clickable.Text of the button will changeSubmit → Submitting…Upload → Uploading…Save → Saving… | Animation – Tailwind CSS | |
| Page Loader | If no clarity is available on components which are in the page and there is need of blocking the page, page loader can be used. | Only when no clarity of components style is available, and we need to block page while the loading is going on. | ||
| Progress Bar | In general loader for all interactions, always applicable, very thin line top sticky. | Tailwind CSS Progress Bars – Official Tailwind UI Components | ||
| Text Loaders | When the text is loading till then that part of text can be “Loading…“ |