Today I want to show you how we can create simple “placeholders” to show while the content loads the way they do Instagram and Facebook (and almost all the most important web applications) in order to improve the experience of our users.
To do this I will use a simple application in React in order to ensure that while our content loads, something similar to the following is displayed:
In addition to improving the user experience, the use of these “placeholders” has the advantage of allowing us to maintain the appearance and structure of the page even if we do not yet have its content, something that is always appreciated in the eyes of the visitor.
So without entertaining us, let’s see it!
Create content loader
I guess the first thing you’ll be wondering is … everything is very beautiful, but how do I think that cool placeholder?
Well, luckily there is a tool created by Danilo Woznica that allows us to visually create it and obtain its SVG.
Creator of React Content Loader
It's a SVG component to create placeholder loading, like Facebook cards loading or also known as skeleton UI.
A round of applause for him:
In order not to complicate our lives much, we will use a “placeholder” that simulates the content of a blog:
The code generated through the tool will be the following:
react-content-loader library? Well, the same developer who created this tool has developed a library in order to integrate the generated placeholders in a simple way:
Creating a component to display a blog article
Since we are going to simulate an Instagram card, the next thing we will need is to create an ArticleItem component that allows us to display content cards.
In the face of not complicating this article much the code of the component in question will be something like this (I used bootstrap so that everything is not so rude):
And we will add to the project the component that we have generated with the Create Content Loader application:
Showing placeholders while loading content
Well, now that we have the basic components of the project, let’s see how to use them.
What we will do is simulate an API call using the
setTimeout function so that the placeholders are displayed while it is resolved. For this we will have the following code:
The idea is very very simple. While the application is in a loading state, the placeholders will be shown and once the “timeout” is resolved, the original articles are displayed.
Now let’s leave something more beautiful.
Placeholder for photos
If you have been creating the project as the article progressed, you will see how at this point there is a very uncomfortable visual effect caused by the loading of the images, since during the time they are showing they do not take up space which causes a jump of the content when they finally appear.
But for that we have our “placeholder” right?
So we will create a new “placeholder” for the images and use it to occupy “that space” while the browser loads the image:
And with this we will prevent our content from jumping at the moment the images are uploaded.
🎱 Extra ball. Transition between placeholders and loaded content
Finally, another thing we can do to make our application better is to encourage the transition between placeholders and loaded content.
For this we can use the
Dead-simple and opinionated component to fade in an element's children. npm install react-fade-in react-fade-in import…
That provides the
<FadeIn> component to animate the appearance of blocks. In this way the change between one state and another will be much more “friendly”:
As you can see, creating a friendly interface while we wait for our content is not very difficult and surely helps to improve the impression that users have when visiting our page because they do not see blank pieces waiting to be filled.
In addition, it is something that they are already accustomed to, so the friction they could experience is practically nil. In short, a good practice to keep improving.
If you want to see the code of this article you have it available in the following Codesanbox:
Create Content Loader
Tool to create your own SVG-Powered component to easily create placeholder loadings (like Facebook cards loading)
SVG-Powered component to easily create placeholder loadings (like Facebook's cards loading).
Do you want to read more articles like this?
If you liked this article I encourage you to subscribe to the newsletter that I send every Sunday with similar publications to this and more recommended content: 👇👇👇