Type to generate custom UI components with AI

Type to generate UI components from text

OR

Browse thousands of MUI, Tailwind, React components that are fully customizable and responsive.

Explore Components

Using MUI Skeleton: How to Enhance User Experience Greatly

UI and UX experts emphasize the need to engage users while they waimarkett for content to load on a web page. Although using spinners to engage users is a gomarketod idea, the reality is that many users may become bored when faced with a repetitive animated spinner. Luke Wroblewski provides insights on this.

Traditionally, spinners and loaders have been used to inform users that content may take some time to load. While this approach has been effective, it is becoming outdated in modern web development. Skeleton screens offer a compelling alternative to traditional loaders by shifting the focus from waiting to progress, thereby reducing the frustration associated with loading times.

Skeleton screens greatly enhance the user experience by emphasizing progress over wait times, creating the illusion that information will incrementally appear on the screen. This concept is corroborated by Bill Chung’s research findings.

This article delves into the utilization of MUI Core Joy UI’s Skeleton component in a React application to enhance the user experience.

Material UI is a renowned open-source library that provides pre-designed components and styles for the development of modern and visually appealing web applications. It adheres to Google’s Material Design guidelines, resulting in the creation of intuitive and well-designed components.

Let’s observe the Skeleton component in action to gain a visual understanding.

PS: Engineers waste time building and styling components when working on a project, writing repetitive markup adds time to the project and is a mundane, boring task for engineers. PureCode.ai uses AI to generate a large selection of custom, styled UI components for different projects and component types.

What is a Skeleton Screen?

A skeleton screen is a UI representation that lacks actual content. Instead, it mirrors the page’s layout, displaying elements in a format akin to the final content, gradually loading as network latency permits.

Essentially, a skeleton screen serves as a wireframe of the page, featuring temporary placeholders for text and images.

What is Unique About a Skeleton Screen?

A skeleton UI mirrors the actual UI of a web or mobile app, providing users with a preview of the loading speed even before content appears. Here are a few compelling reasons to incorporate skeleton screens into your upcoming project:

  1. Simplifies page layout imitation.

  2. Enables progressive content loading.

These screens are commonly known as:

  • Ghost elements

  • Content placeholders

  • Content loaders

Notably, major tech giants like Blockchain.com, YouTube, Facebook, Medium, and others leverage skeleton screens to enhance user experience during content loading.

Pros of Using a Skeleton Screen

Skeleton screens, also known as content placeholders or loading placeholders, are a design technique used in web development to enhance the user experience during page loading. They provide several benefits, making them a valuable tool for developers and designers:

  • Reduced Perceived Loading Time

    One of the main benefits of skeleton screens is that they give users the impression that content is loading quickly. Instead of staring at a blank screen or a spinner, users see a skeletal representation of the page’s layout. This can make the waiting time feel shorter and more bearable.

  • Improved User Engagement

    Skeleton screens provide users with a visual cue that content is on its way, which encourages them to stay on the page rather than leave due to frustration from slow loading. This can result in increased user engagement and reduced bounce rates.

  • Better User Expectation Management

    By showing users a rough structure of the page’s layout before the actual content loads, skeleton components set appropriate expectations. Users have a sense of what to expect on the page, which can reduce confusion and disappointment if the final content takes a bit longer to load.

  • Progressive Loading

    Skeleton screens allow for a more progressive loading experience. Instead of waiting for all content to load before rendering the page, the skeleton layout can be displayed quickly while images and other resources load in the background. This approach provides the user with something to look at and interact with during the loading process.

  • Visual Continuity

    When the final content does load, it replaces the skeleton screen in a smoother transition. This maintains visual continuity, creating a more pleasant and cohesive user experience.

Cons of Using a Skeleton Screen

While skeleton screens offer several advantages for improving user experience during content loading, they are not without their drawbacks and limitations. Here are some of the potential cons of using skeleton screens:

  • Inaccurate Content Placement

    In some cases, skeleton screens may not precisely match the actual content’s layout and size. This can lead to inaccuracies and discrepancies, which might confuse users.

  • Maintenance Challenges

    Keeping skeleton screens up to date with changes in the actual content can be challenging. When the layout or structure of the content evolves, it requires corresponding updates to the skeleton screens.

  • Overused or Annoying Animations

    Excessive use of animations in skeleton screens can be distracting or annoying to users, undermining the goal of providing a smoother loading experience.

  • False Sense of Speed

    While skeleton screens reduce perceived loading times, they don’t necessarily improve the actual loading speed of the content. Users might still experience delays if the content itself takes a long time to load.

  • Accessibility Concerns

    Designing accessible skeleton screens that work well with assistive technologies can be complex and requires careful consideration. Inadequately designed skeleton screens may create accessibility issues.

  • Potential for Overuse

    Overusing skeleton screens can lead to an excessive number of placeholders on a page, which might cause confusion or slow down the user experience.

  • Implementation Complexity

    The implementation of skeleton screens may be more complex in certain cases, especially when dealing with dynamically loaded content, such as infinite scrolls or asynchronous requests.

  • Not Suitable for All Content

    Skeleton screens work best for content that has a predictable structure and layout. For more complex or dynamic content, they may not be as effective.

What is a Skeleton Component?

Skeleton components act as a visual placeholder during loading, typically appearing as a simplified wireframe representation of the UI element it stands for. A combination of these skeleton components forms a complete skeleton screen.

Skeleton components significantly help to improve user experience by mitigating load time frustration, and maintaining responsiveness and user engagement, all while preventing a static, blank white screen.

MUI Skeleton Component

Material UI offers a skeleton component designed to preview or present animated placeholders while data loads or awaits a response for display on the user’s screen. This approach effectively minimizes waiting time and keeps users informed about the loading state, preventing the display of empty screens or messages.

How Do You Use Skeleton in Material UI?

There are two methods for utilizing the Material UI (MUI) Skeleton component:

  1. Masking a Component: In cases like Avatar, Image and Typography, the Skeleton component inherits its dimensions. This ensures a more predictable UI and prevents layout shifts when loading completes.

  2. Setting Custom Width and Height: For more precise control over Skeleton size, consider examples like Geometry and Text blocks. With this approach, you can disregard the parent dimensions entirely. However, be cautious, as it may cause a layout shift if the actual component being mimicked differs in size.

Now that we’ve explored both methods of using the MUI Skeleton component, let’s discuss how to load the skeleton component:

https://codesandbox.io/embed/affectionate-chebyshev-vnqs4r?fontsize=14&hidenavigation=1&theme=dark

In the provided code sandbox, the MUI Skeleton component’s loading prop is initially set to true. To conceal the Skeleton component, simply set this prop to false. If the Skeleton has children, they will be displayed in its place.

How to add Animation to React Loading Skeleton Component in Material UI?

To control the animation of the Skeleton component, you can use the `animation` prop. This prop can have one of the following values:

  • `pulse` (default): Causes the background of the Skeleton to fade in and out.

  • `wave`: Produces a wave-like animation that flows from left to right.

  • `false`: Disables animation entirely.

The code sandbox below demonstrates the wave animation:

https://codesandbox.io/s/mui-skeleton-wave-animation-q5lk97

In this example, the “wave” animation is showcased, offering a visual representation of how the animation prop affects the Skeleton component’s behaviour. This is what the animation would like when viewed on the browser;

To make the wave animation the default for all instances of the Skeleton component, you can leverage the theme’s default props. Here’s how to achieve this:

import { CssVarsProvider, extendTheme } from '@mui/joy/styles';

const theme = extendTheme({
  components: {
    JoySkeleton: {
      defaultProps: {
        animation: 'wave',
      },
    },
  },
});

function App() {
  return (
    <CssVarsProvider theme={theme}>
      <Skeleton />{' '}
      {/* The Skeleton component will have the wave animation by default */}
    </CssVarsProvider>
  );
}

By specifying the default animation as ‘wave’ within the theme’s default props for the JoySkeleton component, you ensure that all instances of Skeleton will use the wave animation as their default behaviour.

How to Create an Avatar Loading Skeleton in Material UI?

When you need to display an avatar with a loading effect, you can achieve this by using the Avatar component to encapsulate the Skeleton. Here’s a simplified example:

import * as React from 'react';
import Avatar from '@mui/joy/Avatar';
import Skeleton from '@mui/joy/Skeleton';

export default function AvatarSkeleton() {
  const [loading, setLoading] = React.useState(true);
  return (
    <Avatar src={loading ? '' : '/static/images/avatar/1.jpg'}>
      <Skeleton loading={loading} />
    </Avatar>
  );
}

This setup will result in an avatar that gracefully transitions from a loading state to the actual image, providing a smooth user experience.

Avatar Loading Skeleton in Material UI

How to Create an Image Skeleton Component in Material UI?

You can use the AspectRatio component to enclose the Skeleton when displaying an image. Here’s a concise example of how to achieve this:

import * as React from 'react';
import AspectRatio from '@mui/joy/AspectRatio';
import Box from '@mui/joy/Box';
import FormControl from '@mui/joy/FormControl';
import FormLabel from '@mui/joy/FormLabel';
import Skeleton from '@mui/joy/Skeleton';
import Stack from '@mui/joy/Stack';
import Switch from '@mui/joy/Switch';

export default function ImageSkeleton() {
  const [loading, setLoading] = React.useState(true);
  return (
    <Stack spacing={2} useFlexGap sx={{ alignItems: 'center' }}>
      <Box sx={{ m: 'auto' }}>
        <AspectRatio variant="plain" sx={{ width: 300 }}>
          <Skeleton loading={loading}>
            <img
              src={
                loading
                  ? 'data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='
                  : 'https://images.unsplash.com/photo-1686548812883-9d3777f4c137?h=400&fit=crop&auto=format&dpr=2'
              }
              alt=""
            />
          </Skeleton>
        </AspectRatio>
      </Box>
      <FormControl orientation="horizontal" sx={{ gap: 1 }}>
        <Switch
          size="sm"
          checked={loading}
          onChange={(event) => setLoading(event.target.checked)}
        />
        <FormLabel>Loading</FormLabel>
      </FormControl>
    </Stack>
  );
}

In this code, the AspectRatio component is used to wrap the Skeleton, creating a visually appealing loading image. Additionally, it provides an interactive option to toggle the loading state.

Image Skeleton Component in Material UI with a toggle button

Customizing Material UI Skeleton Component

Up to this point, we’ve explored the customization of image and avatar skeleton components, and we’ve learned how to load and add animations to these skeletons. Now, let’s delve into additional avenues for customizing the skeleton component:

  • Typography: Tailor the skeleton component to mimic text elements with precision.

  • Geometry: Achieve fine-grained control over the skeleton’s shape and dimensions.

  • Text Block: Customize the skeleton to replicate text blocks for various content types and layouts.

Each of these aspects provides opportunities for further customization and refinement of the skeleton component to suit different use cases and design requirements.

Typography

You can seamlessly integrate the MUI Skeleton component with the MUI Typography component by placing the Skeleton between the Typography component and the text. This effectively creates a placeholder for your text content. Here’s a practical example:

import * as React from 'react';
import Box from '@mui/joy/Box';
import FormControl from '@mui/joy/FormControl';
import FormLabel from '@mui/joy/FormLabel';
import Skeleton from '@mui/joy/Skeleton';
import Stack from '@mui/joy/Stack';
import Switch from '@mui/joy/Switch';
import Typography from '@mui/joy/Typography';

export default function InlineSkeleton() {
  const [loading, setLoading] = React.useState(true);
  return (
    <Stack spacing={2} useFlexGap sx={{ maxWidth: '60ch' }}>
      <Box sx={{ m: 'auto' }}>
        <Typography
          sx={{ position: 'relative', overflow: 'hidden' }}
          level="h1"
          fontSize="xl"
        >
          <Skeleton loading={loading}>A heading</Skeleton>
        </Typography>
        <Typography
          level="body-xs"
          sx={{ mt: 1, mb: 2, position: 'relative', overflow: 'hidden' }}
        >
          <Skeleton loading={loading}>HISTORY, PURPOSE AND USAGE</Skeleton>
        </Typography>
        <Typography sx={{ position: 'relative', overflow: 'hidden' }}>
          <Skeleton loading={loading}>
            <i>Lorem ipsum</i> is placeholder text commonly used in the graphic,
            print, and publishing industries for previewing layouts and visual
            mockups.
          </Skeleton>
        </Typography>
      </Box>
      <FormControl orientation="horizontal" sx={{ gap: 1 }}>
        <Switch
          size="sm"
          checked={loading}
          onChange={(event) => setLoading(event.target.checked)}
        />
        <FormLabel>Loading</FormLabel>
      </FormControl>
    </Stack>
  );
}

In this example, the Skeleton component is inserted between Typography elements, generating a visually appealing loading effect for the text content. This approach maintains a consistent user experience while waiting for actual text to load.

Inline Skeleton with Typography in MUI

The above image is the of setting the loading state to true, when you toggle the loading state, you’ll see the actual content just like in the image below;

Actual content that the inline skeleton with typography is mimicking

Geometry

To create a specific shape with the Skeleton component, you can utilize the `variant` prop and choose between ‘circular’ or ‘rectangular’. To specify the dimensions, make use of the `width` and `height` props. Here’s a practical example:

import * as React from 'react';
import Box from '@mui/joy/Box';
import Skeleton from '@mui/joy/Skeleton';

export default function GeometrySkeleton() {
  return (
    <div>
      <Box sx={{ m: 'auto', display: 'flex', alignItems: 'center', gap: 2 }}>
        <Skeleton variant="circular" width={48} height={48} />
        <div>
          <Skeleton variant="rectangular" width={200} height="1em" sx={{ mb: 1 }} />
          <Skeleton variant="rectangular" width={140} height="1em" />
        </div>
      </Box>
    </div>
  );
}

The result should look like this;

MUI Geometry Skeleton Component

The `width` and `height` props offer support for object notation, enabling responsive values. Here’s an example demonstrating how to create a Skeleton component with a circular shape that is 40x40px on mobile devices and 48x48px on desktop screens:

<Skeleton
  variant="circular"
  width={{ xs: 40, md: 48 }}
  height={{ xs: 40, md: 48 }}
/>

By using this notation, you can easily adapt the dimensions of the Skeleton component based on the screen size, providing a responsive design for your loading placeholders.

Text Block

You can create a block of skeleton text following your theme’s typography styles using the `variant=”text”` and `level` props.

The `level` prop accepts a typography-related token from your theme, and the resulting skeleton text will match the height of the text associated with the `level` prop. Here’s an example:

import * as React from 'react';
import Box from '@mui/joy/Box';
import Skeleton from '@mui/joy/Skeleton';
import Typography from '@mui/joy/Typography';

export default function TextBlockSkeleton() {
  return (
    <Box sx={{ display: 'grid', gridTemplateColumns: '100px 260px', gap: 1 }}>
      <Skeleton variant="text" level="h1" />
      <Typography level="h1">h1 Typeface</Typography>

      <Skeleton variant="text" level="h2" />
      <Typography level="h2">h2 Typeface</Typography>

      <Skeleton variant="text" />
      <Typography>body-md Typeface</Typography>

      <Skeleton variant="text" level="body-sm" />
      <Typography level="body-sm">body-sm Typeface</Typography>

      <Skeleton variant="text" level="body-xs" />
      <Typography level="body-xs">body-xs Typeface</Typography>
    </Box>
  );
}

The result would look like this;

MUI Text Block Skeleton Components

Building a Basic Card Skeleton Component with Material UI

Now, let’s build a basic card skeleton using all the concepts we’ve learned so far, shall we?

https://codesandbox.io/s/mui-card-skeleton-component-t2sg63

In this example, we’ve created a basic card skeleton using the Skeleton component in conjunction with various other components to simulate a card’s content. This provides a loading experience for users while maintaining the card’s structure and layout.

Building a Comment Skeleton Component with Material UI

Now that we have applied what we have learned by building a card component, let us also see how this knowledge can be applied to a different kind of component by building a comment skeleton component.

import * as React from 'react';
import Card from '@mui/joy/Card';
import CardContent from '@mui/joy/CardContent';
import Skeleton from '@mui/joy/Skeleton';

export default function CommentSkeleton() {
  return (
    <Card
      variant="outlined"
      sx={{ width: 'max(400px, 60%)', borderRadius: 0, '--Card-radius': 0 }}
    >
      <CardContent orientation="horizontal">
        <Skeleton variant="rectangular" width={44} height={44} />
        <div>
          <Skeleton variant="text" width={100} />
          <Skeleton level="body-sm" variant="text" width={200} />
        </div>
      </CardContent>
      <CardContent sx={{ gap: 0.5, mt: 1 }}>
        <Skeleton level="body-xs" variant="text" width="92%" />
        <Skeleton level="body-xs" variant="text" width="99%" />
        <Skeleton level="body-xs" variant="text" width="96%" />
      </CardContent>
    </Card>
  );
}

In this example, we’ve applied our knowledge to construct a comment skeleton component using the Skeleton component along with other components. This allows you to create a loading placeholder for comment sections, maintaining a consistent user experience across different parts of your application.

MUI Comment Skeleton Component

Final Thoughts on Material UI Skeleton Component

In conclusion, the Material UI Skeleton component is a powerful tool for enhancing user experiences in web applications. This article has explored various aspects of the Skeleton component, from customizing its appearance to creating loading placeholders for different types of content, such as images, text, avatars, and cards. By implementing these techniques, you can maintain a polished and engaging user experience, even during content-loading periods.

The Skeleton component not only offers versatility and responsiveness through its props but also provides a seamless transition from placeholders to actual content. Its integration with other Material UI components ensures a cohesive design and a consistent user journey.

By incorporating Material UI’s Skeleton component into your projects, you can reduce loading-time frustration, improve user engagement, and ultimately deliver a more polished and professional web or mobile application. Its flexibility and ease of use make it a valuable asset for developers striving to create delightful user experiences.

Reference

For your reference, you can also check out the below YouTube video to learn more about the Material UI skeleton component.

PureCode.ai can cater for your code development process. It will save you valuable time and effort on a project by providing customized, and ready-to-use components which will allow you to prioritize more important and thought-intensive tasks to speed up the development of your user interface.

Shadrach Abba

Shadrach Abba