Today I would like to share with you one way to deal with such needs, based on my experience of various mobile/standalone PWA based applications.

Mostly realized within the scope of my « Tech lead » role at Kaliop.

Why should I display a loading screen instead of a static screen on application start?

A static loading screens can often confuse users into thinking the app has frozen on startup. Which is really not what you want! That why it’s recommended to display a loader.

A loading screen should be visually interesting, carry through brand elements, and provide ample feedback to the user on the loading progress.

8tracks application

How to display a loading animation and block the UI display as long mandatory processes haven’t loaded?

We could use a loading component and redirection?

For a long time, I used to do a specific loading component which is mounted alone and redirect using navigation interface once loading is completed, while this works well on react native with react-navigation , it’s getting complicated with web apps, where the entry point is multiple and depends on the URL.

That’s why I highly recommend the following approach which works on any case.

We should rather build a wrapping component and use a state management strategy.

This pattern will use a wrapping component that will block the UI and display another loading component while some processes are loading in the background. This is where you animation and logo will be used.

We will split this implementation on three separated parts :

The Apploader component where the logic happens. The process provider component, which is generally the main app component, we will call it AppStartupOrchestrator. And the loading component displays your animation, for clarity, this part will not be handled in that article.

💡All the following components are written using typescript , a Javascript super-set provided by Microsoft that allows, among other things static typings. In Javascript, this works pretty similarly, so feel free to convert following snippets to JS ES2015 code using a tool as such: http://www.typescriptlang.org/play/.

Also, feel free to copy code snippet in your editor to get syntax highlight.

The implementation of our app loading process

Main loader component (Apploader.tsx)

This component will take an array of mandatory processes and will display our loader animation as long as each process isn’t ready.

Our application components are children of that view, in our example, we will see that the App router is the first child.

AppLoader.tsx

Now that everything is loading, in the meantime, you can see that as long as every process is not in the ready state, the application will present our loader splash screen. Once that changes, the component’s children will be populated and the application will run, starting this moment it can be said with certainty that each mandatory process data is defined and accessible.

📦 Bonus: Minimum duration blocker

The above snippet comes with a small functionality that will ensure that the loader is displayed for at least XXXX milliseconds, sometimes your app loads too fast and you miss the loading state that you may want to see.

The Processes Orchestrator and it’s loading hooks (AppStartupOrchestrator.tsx + useFavoriteCountry.tsx)

For the loading task, I suggest using some hooks that return some kind of empty value and a final value which is not null once action loading has been processed.

🔗 The loading hook example

As you can see in the following example, favoriteCountry will return whether CountrySelectionStatus.NotChosen , CountrySelectionStatus.Loading or a string representing the country code.

We have 3 states that can be used to define our loading state.

useFavoriteCountry.tsx

In that example we used to a function from the library await-to-js used to handle error from Promise in an easier way.

🎼 The orchestrator (App.tsx)

In our app root level component, we could have something like this :

App.tsx

As you can see we are using the hook we just created above, and add it to a list of loading processes as long the status is loading, ready is false but once this change, ready is true and this will trigger the display of our AppLoader children. Also, we add a 2 seconds minimum duration in production, in case our favorite country process is taking less than this.

🚀 How to improve loading task performances?

Think about cache strategies for offline support and loading performance optimizations. Relying on cache first strategy can drastically improve your app loading time with recent data while in the meantime the fresh data is being collected from the network.