When developing web applications, loading states are essential for improving the user experience, especially when fetching data or displaying dynamic content. Skeleton-loading components are a great way to keep users engaged while waiting for content to load. Instead of displaying a blank screen or a spinner, skeletons serve as placeholders, visually indicating what’s about to appear.

In this article, we will explore what skeleton loading is, how to incorporate skeleton components in React, and how they can greatly enhance your app’s user experience.

What is Skeleton Loading?

Skeleton loading refers to using lightweight, placeholder UI components that give users a sense of the structure or layout before the actual content is loaded. This technique mimics the final content layout and provides a better user experience by reducing the perceived loading time.

For example, a skeleton loader for a list of articles could display a series of blank rectangles where the article images and text would eventually appear. The layout matches what users will see when the data is fully loaded.

Why Use Skeleton Loading Components?

Improved User Experience: Skeleton screens visually indicate that content is being loaded.
Reduced Perceived Loading Time: By showing placeholders, users remain engaged and less likely to abandon the page.
Professional Application Design: Skeleton loaders give your application a polished, modern look.

Building a Skeleton Loader in React

Let’s create a basic example of a skeleton loader component in React. We’ll show how to build a reusable skeleton loader and how to integrate it into a project.

Step 1: Create a Skeleton CSS For Your Loading Components

Here’s some basic CSS to create a skeleton loader with a smooth-loading animation:

@layer base {}

.skeleton {

background-color: #e0e0e0;

overflow: hidden;

position: relative;

user-select: none;

pointer-events: none;

}

.skeleton::after {

content: '';

display: block;

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

background: linear-gradient(

90deg,

transparent,

rgba(255, 255, 255, 0.5),

transparent

);

animation: skeleton-loading 1.2s infinite;

}

@keyframes skeleton-loading {

0% {

transform: translateX(-100%);

}

100% {

transform: translateX(100%);

}

}

Step 2: Create a Skeleton Component

We’ll create a simple skeleton loader for user cards.

const Loading = () => {

return (

{[1, 2, 3, 4].map((item) => (

<article

className="flex gap-3 p-4 mb-3 rounded-md border-[1px] border-neutral-400 w-2/3 mx-auto "

key={item}

>

</div>

</article>

))}

</section>

)

}

export default Loading

Step 3: Using the Skeleton Component

Now that we have our reusable Skeleton component, we can integrate it into our application. Let’s use it in a scenario where we fetch user data.

NB: This component assumes you have installed React query and Axios library.

import { useQuery } from '@tanstack/react-query'

import axios from 'axios'

import Loading from './Loading'

const Users = () => {

const { data, isPending, isError } = useQuery({

queryKey: ['users'],

queryFn: async () => {

const { data } = await axios.get(

'https://jsonplaceholder.typicode.com/users'

)

return data

},

})

if (!isPending) {

return <Loading />

}

if (isError) {

return <p>Something went wrong...</p>

}

return (

{data.slice(0, 4).map(({ id, name, email, address }) => (

<article

key={id}

className="flex gap-3 p-4 mb-3 rounded-md border-[1px] border-neutral-400 w-2/3 mx-auto"

>

{name.charAt(0)}

</span>

<p>{email}</p>

<small>{address?.city}</small>

</div>

</article>

))}

</section>

)

}

export default Users

This should be your result after loading:

Conclusion

Skeleton loaders improve user experience by providing visual feedback during data fetching or rendering. Instead of just displaying a spinner or an empty screen, they help maintain the page’s structure and inform the user about what’s coming.

By creating reusable skeleton components in React, you can easily integrate them into different parts of your application, enhancing the overall performance and UX.