Build a Skeleton Component in React for Better UX

A loading component gives users something to look at while your page loads

Photo by Pankaj Patel on Unsplash

Do you know what a skeleton component is for? It’s a component that presents content, while data is being fetched. Users easily get tired or bored waiting for content. If you just show them a white screen, the majority will leave your site, which you don’t want.

In this article, I will demonstrate how to write a skeleton component and how to use it.

Prerequisites

This article assumes you know React. But don’t worry, if you have experience with Vue, Angular, or any other JavaScript framework instead, you’ll easily understand this article.

Also, I used CRA (Create-React-App) for a faster setup.

Set Up the React Project

npx create-react-app skeleton

I created the simple basic React project using CRA. The project structure is as follows: