How to use Material UI’s Skeleton component

Key takeaways:

• Material UI is a popular React component library that follows Google's Material Design guidelines to build visually appealing, responsive web apps.

• Skeleton component is a visual placeholder that improves user experience during content loading by preventing blank screens.

• Skeleton has four variants—text, circular, rectangular, and rounded—for different types of placeholders.

• Skeleton components have a default pulsating animation, but you can change it to a wave or disable it entirely using the animation prop.

• Skeleton components can automatically adjust their size based on their parent element, maintaining layout consistency.

Material UI is a popular open-source library that provides pre-designed components and styles for building modern and visually appealing web applications. Material UI follows the guidelines provided by Google’s Material Design resulting in intuitive and well-designed components.

In this Answer, we will look into how we can use Material UI's Skeleton component in a React application and increase user experience.

Note: Please makes sure to install Material UI version 5 in your systems as we will be using it in the Answer.

The Skeleton component

The Skeleton component acts as a visual placeholder while the content is loading on the screen. This helps improve user experience by reducing load time frustration, and ensuring responsiveness and activity while avoiding a blank white screen. To get a clear idea of how a Skeleton component looks visually, refer to the following illustration:

Skeleton variants

The Skeleton component has four different shape variants that can be used depending on the use case:

• text: It is the default variant that represents a single textual line. Its height can be adjusted using the font size attribute.

• circular: It is usually used when loading thumbnails, icons, or avatars on the web page.

• rectangular: It displays rectangular-shaped placeholders like paragraphs, images, or any rectangular element.

• rounded: It displays rectangular placeholders with rounded corners.

The code to use each variant is shown below:

In the above output, the first is the rectangular variant, followed by the circular, text, and rounded variants.

Code explanation

• Line 4: We import the Skeleton component from @mui/material/Skeleton.

• Line 10: We define the Skeleton component with the variant attribute set to rectangular and specify its height.

• Line 12: We define the Skeleton component with the variant attribute set to circular and specify its width and height.

• Line 13: We define the Skeleton component with the variant attribute set to text.

• Line 14: We define the Skeleton component with the variant attribute set to rounded.

Skeleton animations

The Skeleton component provides us with pulsating animations by default, but we can change it to a wave animation or just remove it entirely. The coding example for changing animations is given below:

In the output above, we see that the first Skeleton placeholder has a wave animation, the circular placeholder’s animation is disabled, and the last two placeholders are, by default, pulsating.

Code explanation

• Line 10: We define the Skeleton component and set the animation attribute to wave.

• Line 12: We define the Skeleton component and disable animation by setting the animation attribute to false.

Skeleton automatic resizing

The Skeleton components can infer the size of the component it is placed in and resize itself. The coding example of Skeleton components resizing automatically by inferring the dimensions is given below:

In the output above, we can see that the first placeholder infers the dimensions of the Typography component in which it is placed and adjusts its size to the size of a h1 text. Similarly, the rest of the placeholders adjust their size according to the Typography variant they are placed in. The code explanation is given below:

Code explanation

• Line 12: We place the Skeleton component inside the Typography component of h1 variant.

• Line 15: We place the Skeleton component inside the Typography component of h2 variant.

• Line 18: We place the Skeleton component inside the Typography component of h4 variant. To change the color of the Skeleton component, we can use the sx attribute and give a bgcolor.

Real-world example (YouTube videos) of Skeleton

In the coding example below, we have replicated how placeholders are displayed when we navigate to the YouTube home page. Click the “Run” button below and wait for 5 seconds so the video loads and the placeholder disappears.

Code explanation

• Line 10: We have defined a setTimeout function that changes the state of the loading state variable to false after 5 seconds.

• Line 13: We have defined a ternary operator that checks if the loading state is true and displays the Skeleton components (placeholders) from lines 34–38. Otherwise, we show the contents of the loaded video (lines 15–32).

Conclusion

The Material UI Skeleton component provides temporary visual placeholders for content loading and enhancing user experience. By using placeholders, the design consistency is maintained while data is being fetched.