Improve the UX of your React App with Skeleton Screens

In general, websites handle fetching data with different various ways like by showing a Spinner (the case of Netflix for example), a progress bar or a customized animation, one these ways (like used by Medium and Facebook) is handling fetching data on the browser by using React Skeleton Screens, to make it more clearer check the picture below

That will be our app, we’ll build a quick easy and fast React.js app that shows a random poems for a random poet, don’t worry everything will be explained as follows and the source code will be provided at the end 😉

Setup

So before anything let’s initialize our project by creating a react.js app :

npx create-react-app react-screens-example

Now to initialize our content we’ll use a free poetry database provider that you can find here , so let’s start coding. So we’ll need two state variables “poems” and “poet” to be updated with the Api callback

As in the pic above; the function “fetchPoems” does the first call to get the list of the available poets then it takes a random name to parse it with the second call to get the list of poems, this function is called in the useEffect hooks first with a timer to see how things work then we’ll remove the timer and just call it directly without any timer which is how it’s used in general

That means it’s gonna show the Skeleton Screens for 5seconds before changing the content visually but remember to put that line in comment and call the “fetchPoems” function directly as in the line 7.

Now in the return closure we’ll render the content conditionally to the state, so at the first render we’ll have a provisional data (Skeleton Screens later) then after just mounting our useEffect will call the fetchPoems to update the content, so let’s build our Skeleton Screens.

Skeleton Screens

Simply our Skeleton Screens are about customized html elements with grey as background-color and some css-animations to make it sparkle. First of all we need to know the nature of our renderer content i.e : text, title, header, image, and avatar, in our case we’ve three types of content : single line text (title), multi-lines text and avatar, so we’ve to design our skeletons relatively to that. So start by creating a folder and name it “skeleton” with two files “index.js” and “style.css”, the “index.js” is about a React component that has to receive a props that indicates the type of the content cuz we’ve to custom our CSS based on that

So as you can see we create our CSS classes names based on the received props to be customized later in the “./style.css” as follows

Now let’s get back to our App.js to update the render method with this new logic to show the Skeleton before fetching data in hooks function

So here we just test if the initial data is empty, if so we render four blocks in each we’ve a title and a body text element then we render a simple element about the author with avatar and a title element, but if state is well updated then we render ten poems with titles as in the map() function in the line 6 and a block at the right with some poet’s info.

Just before the end, let’s add some quick CSS animation that will be showed with the Skeleton, so create another folder and name it for example “twinkle” (as i did 😜) with two files “index.js” and “style.css” , this animation block will be wrapped in the Skeleton element later, so let’s see this animation root file :

simply here we’ve the wrapper block which we’ll put in the animation, the block that will be used for animation and in the CSS file the animation keyframes that defines a translation on the X line, the animation will take 1.5 seconds to be executed from the left to the right in an infinite loop.

Finally we’ve to add that new animation wrapper to the Skeleton element, just update the fine skeleton/index.js by importing the animation file and wrap the component in the root block as follows :

And that’s it! 😃

Source code: https://github.com/BLemine/medium-article-React-Skeleton-Screens