From the course: Build Modern Web Apps with React, Hooks, State Management, and APIs Using Vite or Next.js

Unlock this course with a free trial

Join today to access over 25,200 courses taught by industry experts.

Skeleton loader

Skeleton loader

From the course: Build Modern Web Apps with React, Hooks, State Management, and APIs Using Vite or Next.js

Start my 1-month free trial Buy for my team

Skeleton loader

“

Hello, and welcome back. Let's discuss what are the styling option we have for our loaders by using Tailwind CSS. So Tailwind CSS provides two options. One is the spinner loader, which we have already tried. It comes from animate-spin class. When you apply it on some div, it's going to do a spinner effect. The other one is the animate dash pulse. So it shows a pulse kind of animation and we usually call this skeleton. This one is the more enhanced form when you are showing data in the form of cards or showing a list of items. So showing a skeleton is going to be a good effect. In the other cases, when you are doing a manipulation option on a resource by calling the post or put API, then over there you can use the spinner loader. The error message component or the error component can remain the same. Let's quickly go through the design pattern that we used and what should we avoid. The good examples include friendly tone, don't be harsh on the user, give some actionable item, for…

Contents