Next.js & React-Skeletons: A Beginner’s Guide to Placeholder UI

Written by

learnmodernjavascript

in

In the fast-paced world of web development, user experience is king. One crucial aspect of a great user experience is perceived performance. Even if your application is loading data quickly, users can still feel frustrated if they’re staring at a blank screen. That’s where skeletons come in. Skeletons are placeholder UI elements that mimic the structure of your content while it’s loading. They give users a visual cue that something is happening, making the wait feel shorter and the overall experience smoother. This tutorial will guide you through implementing skeletons in your Next.js projects using the react-loading-skeleton npm package, empowering you to create more engaging and user-friendly web applications.

Why Use Skeletons? The Problem They Solve

Imagine visiting a website and seeing a blank screen for several seconds while data loads. It’s frustrating, right? This is a common problem in web development, especially when dealing with dynamic content fetched from APIs. Users perceive this as a slow and unresponsive website, leading to a poor user experience. Skeletons solve this by:

  • Improving Perceived Performance: Skeletons provide immediate visual feedback, making the loading process feel faster.
  • Enhancing User Experience: They give users a sense of what’s coming, reducing anxiety and uncertainty.
  • Creating a More Engaging Interface: Skeletons make the loading process less jarring and more visually appealing.

By using skeletons, you’re not just improving loading times; you’re actively creating a more positive and engaging experience for your users. This can lead to increased user satisfaction, longer session durations, and better conversion rates.

Introducing React-Loading-Skeleton

react-loading-skeleton is a lightweight and easy-to-use npm package that makes implementing skeleton screens in your React and Next.js projects a breeze. It provides a simple API for creating various skeleton elements, including text, images, and more complex layouts. It’s also highly customizable, allowing you to tailor the appearance of your skeletons to match your application’s design.

Here’s why react-loading-skeleton is a great choice:

  • Easy to Use: Simple API makes implementation straightforward.
  • Highly Customizable: Offers options for styling and appearance.
  • Lightweight: Doesn’t add significant bloat to your project.
  • Good Performance: Efficiently renders placeholder elements.

Setting Up Your Next.js Project

If you don’t already have a Next.js project, let’s create one. Open your terminal and run the following commands:

npx create-next-app my-skeleton-app
cd my-skeleton-app
npm install react-loading-skeleton

This will create a new Next.js project named my-skeleton-app, navigate into it, and install the react-loading-skeleton package. Now, you’re ready to start building your skeleton screens.

Basic Implementation: Text and Image Skeletons

Let’s start with a simple example. We’ll create a basic page with a title, some text, and an image, and then implement skeleton screens for each element. Open pages/index.js and replace the existing content with the following:

import Skeleton from 'react-loading-skeleton';
import 'react-loading-skeleton/dist/skeleton.css';

function HomePage() {
  // Simulate data loading
  const isLoading = true; // Replace with your actual loading state

  return (
    <div style={{ padding: '20px' }}>
      <h1>{isLoading ? <Skeleton width={200} /> : 'Welcome!'}</h1>
      <p>
        {isLoading ? (
          <Skeleton count={3} />
        ) : (
          'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.'
        )}
      </p>
      <div style={{ width: '300px', height: '200px' }}>
        {isLoading ? (
          <Skeleton height={200} />
        ) : (
          <img src="/example-image.jpg" alt="Example" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
        )}
      </div>
    </div>
  );
}

export default HomePage;

In this code:

  • We import the Skeleton component from react-loading-skeleton.
  • We import the default CSS styles for the skeleton.
  • We use a boolean variable isLoading to simulate the loading state. Replace this with your actual data fetching logic.
  • We conditionally render the skeleton components based on the isLoading state.
  • We use the width, height, and count props to customize the appearance of the skeletons.

To see the image example, create a placeholder image file named example-image.jpg in the public folder (you can use any image). Run your Next.js development server with npm run dev. You should now see the skeleton placeholders when isLoading is set to true. Change the isLoading variable to false to see the loaded content.

Customizing Skeleton Styles

react-loading-skeleton offers several ways to customize the appearance of your skeletons. You can use inline styles, CSS classes, or even global styles to match your application’s design. Let’s explore some common customization techniques.

Inline Styles

You can directly apply inline styles to the Skeleton component using the style prop. For example:

<Skeleton width={100} height={20} style={{ borderRadius: '5px', backgroundColor: '#f0f0f0' }} />

This will create a skeleton with a specified width, height, rounded corners, and a custom background color.

CSS Classes

For more complex styling, it’s recommended to use CSS classes. You can add a className prop to the Skeleton component and define the styles in your CSS file. For example:

<Skeleton className="my-skeleton" />

And in your CSS file (e.g., styles/globals.css):

.my-skeleton {
  border-radius: 8px;
  background-color: #e0e0e0;
}

Global Styles

You can also override the default styles of react-loading-skeleton by targeting its CSS classes. This is useful for applying a consistent style across your entire application. For instance, to change the default skeleton color, you could add the following to your global CSS file:

.skeleton {
  background-color: #ddd !important;
}

The !important declaration ensures that your styles take precedence over the default styles.

Advanced Implementation: Skeleton for Complex Layouts

For more complex layouts, you’ll need to create skeletons that mimic the structure of your content more closely. This often involves combining multiple Skeleton components and using CSS to arrange them in the desired layout. Let’s create a skeleton for a card component.

First, create a new component file named components/CardSkeleton.js:

import Skeleton from 'react-loading-skeleton';
import 'react-loading-skeleton/dist/skeleton.css';

function CardSkeleton() {
  return (
    <div style={{ border: '1px solid #ccc', borderRadius: '8px', padding: '16px', width: '300px' }}>
      <Skeleton height={20} width="70%" style={{ marginBottom: '10px' }} />
      <Skeleton height={15} count={2} style={{ marginBottom: '10px' }} />
      <Skeleton height={100} style={{ marginBottom: '10px' }} />
      <Skeleton height={30} width="50%" />
    </div>
  );
}

export default CardSkeleton;

This component creates a basic card-like structure with placeholders for the title, description, and image. Now, update pages/index.js to use this new component:

import Skeleton from 'react-loading-skeleton';
import 'react-loading-skeleton/dist/skeleton.css';
import CardSkeleton from '../components/CardSkeleton';

function HomePage() {
  // Simulate data loading
  const isLoading = true; // Replace with your actual loading state

  return (
    <div style={{ padding: '20px', display: 'flex', gap: '20px' }}>
      {isLoading ? (
        <CardSkeleton />
      ) : (
        <div style={{ border: '1px solid #ccc', borderRadius: '8px', padding: '16px', width: '300px' }}>
          <h2>Card Title</h2>
          <p>Card Description...</p>
          <img src="/example-image.jpg" alt="Example" style={{ width: '100%', height: '150px', objectFit: 'cover', marginBottom: '10px' }} />
          <button>Learn More</button>
        </div>
      )}
    </div>
  );
}

export default HomePage;

This example demonstrates how to create a skeleton that matches a more complex component. You can adapt this approach to any layout or component in your application.

Handling Loading States in Real-World Scenarios

In a real-world application, you’ll need to integrate skeletons with your data fetching logic. Here’s how you can do it:

Using useState

The simplest approach is to use the useState hook to manage the loading state. Before fetching the data, set the loading state to true. After the data is fetched and the component is updated, set the loading state to false. Here’s a basic example:

import { useState, useEffect } from 'react';
import Skeleton from 'react-loading-skeleton';
import 'react-loading-skeleton/dist/skeleton.css';

function MyComponent() {
  const [data, setData] = useState(null);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    async function fetchData() {
      setIsLoading(true);
      // Simulate API call
      await new Promise((resolve) => setTimeout(resolve, 2000));
      const response = { title: 'Fetched Data', content: 'Some content here...' };
      setData(response);
      setIsLoading(false);
    }

    fetchData();
  }, []);

  return (
    <div>
      {isLoading ? (
        <div>
          <Skeleton width={200} />
          <Skeleton count={3} />
        </div>
      ) : (
        <div>
          <h2>{data.title}</h2>
          <p>{data.content}</p>
        </div>
      )}
    </div>
  );
}

export default MyComponent;

In this example, the component initially renders the skeletons. After the simulated API call (using setTimeout), the data is fetched, the loading state is set to false, and the actual content is displayed.

Using a Data Fetching Library (e.g., axios, fetch)

When using a library like axios or the built-in fetch API, you’ll typically use the useState hook to manage the loading state and store the fetched data. The process remains similar:

  1. Set isLoading to true before making the API request.
  2. Make the API request.
  3. On success, set the data and isLoading to false.
  4. On error, set isLoading to false and handle the error (e.g., display an error message).

Here’s an example using fetch:

import { useState, useEffect } from 'react';
import Skeleton from 'react-loading-skeleton';
import 'react-loading-skeleton/dist/skeleton.css';

function MyComponent() {
  const [data, setData] = useState(null);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    async function fetchData() {
      setIsLoading(true);
      try {
        const response = await fetch('https://api.example.com/data'); // Replace with your API endpoint
        if (!response.ok) {
          throw new Error('Network response was not ok');
        }
        const jsonData = await response.json();
        setData(jsonData);
      } catch (error) {
        setError(error);
        console.error('Error fetching data:', error);
      } finally {
        setIsLoading(false);
      }
    }

    fetchData();
  }, []);

  if (error) {
    return <p>Error: {error.message}</p>;
  }

  return (
    <div>
      {isLoading ? (
        <div>
          <Skeleton width={200} />
          <Skeleton count={3} />
        </div>
      ) : (
        <div>
          <h2>{data.title}</h2>
          <p>{data.content}</p>
        </div>
      )}
    </div>
  );
}

export default MyComponent;

Remember to replace 'https://api.example.com/data' with your actual API endpoint.

Using Server-Side Rendering (SSR) or Static Site Generation (SSG)

For Next.js applications, you can leverage SSR or SSG to pre-render the content on the server. This can significantly improve the initial load time and SEO. In these cases, you can still use skeletons, but the implementation differs slightly. You’ll typically render the skeleton on the client-side while the server is fetching data. Once the data is available, the server will render the actual content.

Here’s a basic example using getServerSideProps (SSR):

import { useState } from 'react';
import Skeleton from 'react-loading-skeleton';
import 'react-loading-skeleton/dist/skeleton.css';

export async function getServerSideProps() {
  // Simulate API call on the server
  await new Promise((resolve) => setTimeout(resolve, 2000));
  const data = { title: 'Server-Side Data', content: 'Content fetched on the server...' };
  return { props: { data } };
}

function SSRComponent({ data }) {
  const [isLoading, setIsLoading] = useState(!data);

  useEffect(() => {
    if (data) {
      setIsLoading(false);
    }
  }, [data]);

  return (
    <div>
      {isLoading ? (
        <div>
          <Skeleton width={200} />
          <Skeleton count={3} />
        </div>
      ) : (
        <div>
          <h2>{data.title}</h2>
          <p>{data.content}</p>
        </div>
      )}
    </div>
  );
}

export default SSRComponent;

In this example, the getServerSideProps function fetches the data on the server. The component then uses the data prop. The client-side logic checks if the data has been provided and sets the loading state accordingly. This approach combines the benefits of SSR (faster initial load) with the user experience of skeletons.

Common Mistakes and How to Fix Them

Here are some common mistakes developers make when implementing skeleton screens and how to avoid them:

  • Overuse: Don’t use skeletons for every single element. Overusing skeletons can make your UI feel cluttered and less responsive. Use them strategically for elements that take a significant amount of time to load.
  • Incorrect Loading State: Ensure your loading state accurately reflects the data fetching process. Incorrectly managing the loading state can lead to skeletons appearing at the wrong times or not at all.
  • Poor Styling: Make sure your skeletons match the overall design of your application. Skeletons that are visually jarring can be counterproductive.
  • Ignoring Error Handling: Always handle potential errors during data fetching. If the data fails to load, provide an appropriate error message instead of just leaving the skeleton indefinitely.
  • Not Considering Accessibility: Ensure your skeletons are accessible to users with disabilities. Use appropriate ARIA attributes to indicate that the content is loading.

Key Takeaways

Implementing skeleton screens with react-loading-skeleton is a simple yet powerful technique to improve the perceived performance and user experience of your Next.js applications. By providing visual feedback during the loading process, you can make your website feel faster, more responsive, and more engaging. Remember to:

  • Choose react-loading-skeleton for its ease of use and customization options.
  • Integrate skeletons with your data fetching logic using useState and useEffect.
  • Customize the appearance of your skeletons to match your design.
  • Use skeletons strategically to enhance user experience.

FAQ

Here are some frequently asked questions about using skeleton screens in Next.js:

Q: How do I choose the right size and style for my skeletons?

A: The size and style of your skeletons should closely resemble the actual content they represent. Use the same dimensions, fonts, and colors as the final content to provide a seamless transition when the data loads.

Q: Can I use skeletons with images?

A: Yes, you can. Use the Skeleton component with the height and width props to create placeholders for images. Consider using a slightly different background color for the image skeleton to differentiate it from the surrounding content.

Q: How do I handle errors when fetching data?

A: Implement error handling within your data fetching logic. If an error occurs, set an error state and display an appropriate error message instead of the skeleton. This provides informative feedback to the user.

Q: Is it possible to animate the skeleton?

A: Yes. The react-loading-skeleton library provides a default shimmer animation. You can also implement your own animations using CSS keyframes. Consider subtle animations to draw the user’s attention to the loading content without being distracting.

Beyond the Basics

As you become more comfortable with skeleton screens, explore more advanced techniques. Consider using skeleton screens in conjunction with other loading indicators, such as progress bars or spinners, for particularly long-loading operations. Experiment with different animation styles and layouts to create a unique and engaging user experience. Remember, the goal is to make the loading process as seamless and user-friendly as possible. By thoughtfully implementing skeleton screens, you can significantly enhance the perceived performance and overall quality of your Next.js applications, leading to a more positive and satisfying experience for your users. The careful use of skeleton screens is a testament to the importance of considering every aspect of the user experience, from the initial click to the final display of content.

More posts