We have all experienced that moment when we don’t know if the website we are accessing is doing something in the background or if it has simply crashed and left us waiting for a response. That uncertainty of not knowing what is happening causes a terrible user experience, which today, we must pay close attention to as web developers. Whenever we make a request to our back-end or some other external service, there is a time in which our application waits to receive the requested information. It is at this point that we must inform the user that something is happening. To solve this problem, we will use Skeleton Loaders, which are a modern form of what have been the traditional Spinners and Loaders. Spinners and Loaders fulfill their function of informing users that content will take time to load, but for modern web development, they are becoming obsolete. What are Skeleton Loaders? A loading skeleton is a version of the user interface that does not include the actual content but instead mimics the page layout by displaying its elements similar to the actual content as it loads and becomes available. A skeleton display is essentially a wireframe structure of the page, with placeholder boxes for text and images. A skeleton UI resembles the actual UI of the page, so users will understand how quickly the web or mobile application will load even before the content is displayed. Here are a couple of reasons why you might want to consider using skeleton screens in your next project: Mimicking a page layout is easier with a skeleton screen, Content loads progressively (not all at once). Skeleton Loading is also known as: skeleton screens ghost elements content placeholders content loaders React Skeleton Loading Pros It is API-based, and it has one component with props for all customization. It can be used as a separate skeleton component and also inside any component directly, so it’s flexible. It supports theming and Pulse animation. Cons It’s easy to implement for a simple Skeleton UI but complicated for more complex skeletons. Having a separate skeleton component will make it harder to maintain when the UI and styles change. Building a Skeleton Loader for an eCommerce Product Gallery page In this tutorial, we will create a product gallery explaining the main properties offered by the library. Here is what we will develop: Let’s start by creating a new project with: npx create-react-app my-app The next thing is to install the libraries we will use. In this case, we will use for the styles, for the icons, for the data fetching, and of course, . styled-components react-icons axios react-loading-skeleton npm i styled-components react-icons axios react-loading-skeleton After that, we create the following structure for the project: src/
├── assets/
│   └── banner.jpg
├── components/
│   ├── Banner.js
│   ├── Gallery.js
│   └── Header.js
├── pages/
│   └── Plp.js
├── styles/
│   └── GlobalStyles.js
├── App.js
└── index.js As you can see, it is a very simple project where the only components that interest us are Banner.js and Gallery.js, where we have implemented the Skeleton Loading. The rest of the components are just to shape the project and simulate an e-commerce product page. I will leave the repository at the end of the post. Now let’s start explaining what interests us about the project. First, we are going to add some dummy products to show them in our gallery. For this, we will use , which is a free online REST API that you can use whenever you need. fakeStoreAPI axios.get('https://fakestoreapi.com/products/category/electronics/')            .then(({ data }) => {                
  setProducts(data)               
  setLoading(false)
}) With this endpoint, what we get is a JSON with dummy products from the electronics category and, we get a response like this: [
  {
    "id": 9,
    "title": "WD 2TB Elements Portable External Hard Drive - USB 3.0 ",
    "price": 64,
    "description": "USB 3.0 and USB 2.0 ...",
    "image": "https://fakestoreapi.com/img/61IBBVJvSDL._AC_SY879_.jpg",
    "rating": {
      "rate": 3.3,
      "count": 203
    }
  },
  {
    "id": 10,
    "title": "SanDisk SSD PLUS 1TB Internal SSD - SATA III 6 Gb/s",
    "price": 109,
    "description": "Easy upgrade for ...",
    "category": "electronics",
    "image": "https://fakestoreapi.com/img/61U7T1koQqL._AC_SX679_.jpg",
    "rating": {
      "rate": 2.9,
      "count": 470
    }
  },
  ...
] The next step is to misuse the data received from the API and create a product card for each item. <GalleryStyles>            
  <h2 className='gallery__title'>Featured Products</h2>
  <div className='gallery__grid'>                
    {products &&                    
      products.map(product => {                        
        return (                            
          <section key={product.id}>
            <article className='item'>
              <div className='item-img'>
                <img src={product.image} alt=''/>
              </div>
              <h3 className='item-title'>{product.title}</h3>
              <div className='item-info'>
                <span>{product.category}</span>
                <div className='item-rating'>
                  <span>{product.rating.rate}</span>
                  <span className='item-start'>
                    <FaStar fill='yellow' /></span>
                </div>
              </div>
              <h3 className='item-price'>${product.price}</h3>
              <div className='item__btns'>
                <button className='item__btnadd'>
                  Add to card
                </button>
                <button className='item__btnbuy'>
                  Buy now
                </button>
              </div>                                
            </article>
          </section>
        )                    
      })                
    }            
  </div>        
</GalleryStyles> Now that we have our gallery created, we move on to create the Skeleton Loading of each product card. The first thing to do is import the library and the CSS styles. import Skeleton, { SkeletonTheme } from 'react-loading-skeleton'
import 'react-loading-skeleton/dist/skeleton.css' As we saw previously, the Skeleton Loading is mainly based on making a layout as close as possible to the component we want to represent. So, we will copy as such the structure of the component that is inside the tag which is the product card we want to represent. <Section> To keep the structure as similar as possible, we will try to respect all the HTML tags that we have used to layout the component as well as the classes. The magic of the Skeleton Loading consists of replacing the content of each element with its component . <Skeleton/> <section>
  <article className='item'>
    <div className='item-img'>
      <Skeleton width={140} height={140} />
    </div>
      <h3 className='item-title'><Skeleton count={4} /></h3>
    <div className='item-info'>
      <Skeleton width={160} height={20} />
      <Skeleton width={30} height={20} />
      <Skeleton width={22} height={22} circle={true} />
    </div>
    <Skeleton height={48} count={2} className='skeleton' />
  </article>
</section> While we can leave the default component without modifying any properties, it works correctly but we might notice that our Skeleton doesn’t look much like our final component, so we will use some of its properties to make it more similar. <Skeleton/> Skeleton react loading provides us with several properties to style our Skeleton. With and we add the width and height of the Skeleton in px. width height With a we make a Skeleton a circular figure and this property is a boolean. circle We also have a which replicates quantity of Skeletons or rows of Skeletons as we indicate it. count n In the same way, we can change the speed of the animation that brings us by default which is , and we do it with the property. 0.2 duration In addition, the library offers us the option to change the colors of the Skeleton, we do it with its component where we can change the base color and the color of the animation. <SkeletonTheme> <SkeletonTheme color='#F5F5F5' highlightColor='#ffffff'></SkeletonTheme> There are more properties but in this tutorial, We only use the most used ones. Now we can see that our Skeleton already looks much more like our product sheet. Finally, we have the problem that We don’t know how many elements the fetching will return to us at the data we use. Therefore, we do not know how many Skeletons we should paint. That is solved if we have defined pagination in the gallery, then we already know that for each page, We will show n amount of elements. If we do not have any pagination implemented, what we could do, is define a specific number of skeletons we want to display or check how many elements are visible in the viewport to display the necessary skeletons. . See the demo here . Project Repo here Conclusion As we can see, it is not difficult to create Skeletons Loadings for our websites and add a great user experience. However, there are points to consider when implementing Skeletons. For example, if we need fast development, it is not a good idea to use them because they add another layer of logic to our components; besides, if we are still in the development of the components, these can change several times and, we will have to do the same with our Skeletons every time we modify the design of our component. My recommendation would be to implement Skeleton Loading at the end of our project, when we have the final design of each component, or keep a simple Skeleton representing only the component container and, at the end of the development, give the final structure of our design to the Skeleton. Undoubtedly, they are an excellent alternative to avoid seeing blank screens. Also published . here

How to Simulate a Backend REST API with json-server for CRUD Development in React

How to Create a Modern Skeleton Loader in React to Improve User Experience

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

Using React Router v6 for Private and Public Routes with Access Validation

10 Resources That’ll Make You Better At Dashboard Creation

10+ Ridiculously Cool Admin Themes And Templates

10 Reasons Why Front End Development Is a Great Career Choice

10 Reasons To Use TailwindCSS In Your Next Project

Using React Router v6 for Private and Public Routes with Access Validation

10 Resources That’ll Make You Better At Dashboard Creation

10+ Ridiculously Cool Admin Themes And Templates

10 Reasons Why Front End Development Is a Great Career Choice

10 Reasons To Use TailwindCSS In Your Next Project

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps