Skeleton loader

How to build skeleton loading screens in Bravo Studio

One of the key features of Bravo is its flexibility both for the design and the backend. Thanks to leveraging the power of tools like Figma or Adobe XD together with the usage of Bravo tags, we can have full control over how our apps look and feel.

What is a skeleton loader?

In simplest terms, Skeleton Loader is a static / animated placeholder for the information that is still loading. It mimic the structure and look of the entire view.

Skeleton loaders create a perception of reduced waiting time, providing a good user experience for the app navigation. Good interaction design and good UX will always require some kind of feedback: obvious, visible, understandable reactions from the UI. While generic loaders like spinners are effective in many cases, skeleton ones give an immediate reaction and let users understand what is going to happen next.

How it works

To create a skeleton loader in Bravo, we are going to use the Bravo page states tags: [state:default:NAME] for the page that is loaded and [state:loading:NAME] for the skeleton one. Whenever the first one triggers an API request to load external data, the loading page will be shown immediately. Some points we need to keep in mind:

• The loading page will only appear when the related page loads external data

• Loading pages can’t have any data bound

• Page transitions won’t work on loading pages

• We can have one loading page per "default" page (will increase the page count)

• Loading pages won’t be shown when using pull to refresh

It is interesting to mention also that we can set up a [state:loading] page (without :NAME) to be used by default on any screen of you app, and then use custom loading screens for specific pages. Full design power! 🙌

Setup the design

Once you have the main page designed, you can duplicate it and replace some elements by grey shapes. In our case we have also added a LottieFile animation at the top. Alternatively you can place a LottieFile with the whole skeleton design. There are plenty of them ready to use! Just find the one that better fits in with your design or create your own.

Then add the tag [state:default:NAME] to the main page and [state:loading:NAME] to the skeleton screen. Note that you need to replace NAME with a unique identifier of your choice. It is not required to be uppercase but it helps us to keep things organised.

And that’s it! Now every time the page loads data from the API, the skeleton loader will be shown 🎉

You can see this example in action by duplicating our sample app or building the full setup from scratch duplicating the design file, copying the Airtable base and connecting both in Bravo Studio.

Resources for this tutorial

• Sample app in Bravo Studio
• Design file
• Example database