Sprout Social

Components

Skeleton

View on GitHub

Skeleton loaders create perceived performance and reduce user frustration around load times.

Loading user experiences are designed for creating apparent speed for users waiting for content to load. Loading skeletons help progressively populate content on web pages as it becomes available.

Skeleton loading is helpful for web page content that takes greater than a second to load:

A delay of 0.2-1.0 seconds does mean that users notice the delay and thus feel the computer is "working" on the command, as opposed to having the command be a direct effect of the users' actions.

Jakob Nielsen, excerpt from Chapter 5 of his book Usability Engineering.

Skeleton loading is only useful for content loading within 10 seconds. For anything over 10 seconds, a progress bar is necessary.

Anything slower than 10 seconds needs a percent-done indicator as well as a clearly signposted way for the user to interrupt the operation.

Jakob Nielsen, excerpt from Chapter 5 of his book Usability Engineering.
import { Skeleton } from '@sproutsocial/racine'
() => {

    const [loading, setLoading] = useState(true);



    return (

      <>

        <Box

          maxWidth={200}

          p={400}

          borderRadius="outer"

          border={500}

          borderColor="container.border.base"

        >

          {loading ? 

            <>

              <Skeleton width={48} height={48} mb={400} borderRadius='pill' />

              <Skeleton width='100%' height={24} mb={400} borderRadius='inner' />

              <Skeleton width='100%' height={24} mb={400} borderRadius='inner' />

              <Skeleton width='100%' height={102} />

            </>

            : 

            <>

              <Avatar 

                appearance='circle' 

                mb={300}

                size='48px' 

                src='https://images.unsplash.com/photo-1572442388796-11668a67e53d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1747&q=80'

              />

              <Text fontSize={300}>A beans iced, strong cinnamon sugar milk.</Text>

              <Image mt={400} mb={0} src='https://images.unsplash.com/photo-1469957761306-556935073eba?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2515&q=80' />

            </>

          }

        </Box>

        <Button 

          mt={400} 

          appearance='primary' 

          onClick={() => {

            window.setTimeout(() => setLoading(!loading), 1000)

          }} 

        >

          Toggle Content

        </Button>

      </>

    )

  }

Best Practices

do

Use skeletons for content in container or data components.

Examples: table data, avatars, images, bodies of text.

don't

Use skeletons for inputs.

Examples: buttons, textareas, text inputs, checkboxes.

don't

Turn modal, dropdowns, popouts, toast notifications, or any sort of overlays into skeletons.

Use skeletons to replace the loading content inside of the overlay instead.

don't

Use skeletons for content that takes over 10 seconds to load.

Use a progress bar.