React User Experience Tactics: Placeholder Loading Content
Improving React Loading Screens
Today we will be taking the next step to improving user experience in React, using placeholder loading content. Scroll down to learn how to implement this tactic in your project, step by step.
Let’s take a look at the before and after in the example above.
In the before example, we have a simple loader animation having us wait for some mysterious content, then unexpectedly throws us some cards when it is done loading.
In the after example, notice the smooth gradient moving across the placeholder cards, indicating to the user that we are loading some content for them here, and then gracefully fading the results into their designated slots.
The page should always look and feel structurally sound.
An important takeaway from this strategy is the structure of the page before and after loading. The placeholder content ensures the page is always holding consistent dimensions, both before and after loading the content in. If we opt to use a simple loader, the page will potentially have to resize itself to fit the content after it loads in
The biggest players are using this tactic:
How do I implement this tactic in my React project?
Luckily Danilo Woznica has built two tremendously useful tools to design and implement these placeholders in React:
React-Content-Loader and Create-Content-Loader
Create-Content-Loader is a tool to help us generate a placeholder component, and it comes with some useful presets such as instagram layout, facebook layout, code placeholder, etc.
Let’s create an upgraded loading experience, step by step:
Step 1: Create React App & Install Packages
npx create-react-app placeholder
cd placeholder
npm i @material-ui/core @material-ui/icons react-content-loader react-fade-in bootstrap
Step 2: Create Card Component
In this step we will create the card component we want to display after the loading is complete.
In the /src folder, make a new file called Card.js
We can now pass in a cover image and song/artist as props.
Step 2: Create Placeholder Component:
You can either use my example placeholder or create your own here.
In the /src folder, create a new file called Placeholder.js
Step 3: Putting it all together.
In App.js, we will want to first create a state variable “loading” and set it to true.
constructor(props){
super(props)
this.state = {
loading: true
}
}In componentDidMount, we will make a fake API call that will simulate fetching data, then set our loading state to false.
componentDidMount(){
fetch("https://jsonplaceholder.typicode.com/posts")
.then(response => response.json())
.then(json => {
setTimeout(() => this.setState({ loading: false }), 4000);
});
}In the render function, we will check if the state is loading, if true, we will render three placeholder components, then if false, we will render three cards. Notice that we wrap the three card components with <FadeIn> to have a smooth transition from placeholders to content. Here is how App.js should look all in all:
