Animated Loading Skeleton in React Native

The Activity Indicator is a ubiquitous component in the React Native toolkit for indicating “work” being done in an app. It’s super easy to drop one on a screen and tie it to a loading state to show users when you are fetching content or performing other long running operations. Done and done! But, at no offense to the hard working Activity Indicator… it’s a bit boring, isn’t it? Contemporary UX wisdom suggests that an users may find loading to be more engaging (and may perceive loading happening faster) if the loading indicator is a facsimile of the type of content the app is trying to load, replacing expected content with “scaffolding content” or a loading skeleton. In this post, we’ll explore a quick way to build a bespoke loading skeleton system for use in a React Native app.

For ease of setup, we’ll build the pieces that make up our loading skeleton in an Expo Snack, but you can just as easily do so in a full-fledged React Native project. We’ll start with a new file in our components folder that will be home to all the inner working of our loading skeleton, including:

• A pulsing animation to indicating loading
• A “randomizer” to add variety to the number of lines of placeholder content and the length of the lines comprising the placeholder content

In practice, the most basic part of the loading skeleton we want to build is a single pulsing rectangle. We’ll start our journey there:

Essentially this block of code is simply setting up our shape to animate with a given color. We establish an animation that eases from an opacity of 0.15 to an opacity of 0.5, the repeats indefinitely. At this point, our shape is unstructured; since we pass in height and width as required parameters as well as standard view “styles”, we have the flexibility to use this function component in many different configurations. We could even pass it a border radius to turn our rectangle into a circle or oval! Let’s add some more supplementary bits before putting everything together into a single loading skeleton:

The LoadingText component here does the bulk of the work we need to inject some variety into our loading skeleton. Using a crude randomizer function, we ensure that each card in our loading skeleton will draw itself between 1 and 3 lines of “text”. I’ve opted for a fixed range in this instance, but note that you could make this even more flexible by adding the min (1) and max (3) number of lines a props, allowing this function to be deployed to large paragraphs or some such. We then take our random-ish number and create an empty array, which is then iterated over using a map function. Within the map function, we use another crude randomizer function to create a bar that is at least 70% of the width of the container wide up to 100% wide in 5% increments.

With those two pieces out of the way, we’re ready to start pulling together the bones of our loading skeleton. For the sake of demonstration, I’ve prepared two flavors: a short card with a title placeholder and a sub-heading placeholder, as well as a larger card that included an image placeholder, some heading content placeholders (which makes use of the LoadingText component we built above) and a fixed content placeholder, like we might use to represent a timestamp or an author field. Since both of these will be used outside the world of this general file, we’ll be exporting both components for further use:

Notice how we are composing each to make use of the parts built previously. We can compose these pieces in kind to build out a whole page of skeleton content, like so:

Just for fun, if we tie the array of cards to state, we can refresh the page and see the random-ish functions at work without reloading the whole app. The end result should look something like the following:

And that all it takes! Except for the hard part of, you know, making content