XamGirl

Loading data is one of the most common tasks that we do in a mobile application. It can also be the thing that bothers our users the most when using it due to the time they must wait to obtain the desired result, that’s why we need to provide the best user experience possible to make it as pleasant as possible.

When thinking of loading indicators options, the first thing that comes to mind is using the Xamarin Forms default Activity Indicator:

Or the popular Acr.UserDialogs plugin by Allan Ritchie.

Both are great options, but the problem with these is that they lack customization which doesn’t allow us to give the user a great user experience.

In this article we are going to explore other options that will lead to a better user experience:

1. Use a Popup

If you need to have a progress indicator that blocks the screen while loading data (same concept of Acr.UserDialog but using your own design) use a popup. There are several ways to create a popup in Xamarin Forms:

1. Using the Rg.Plugins.Popup
2. Using the Xamarin Community Toolkit
3. Create your own overlay view

With this approach, you can just install one of packages mentioned above and add your own view inside:

Here is a full article by Sumit Singh on how to do it.

2. Use Lottie

Lottie is one of my all-time favorite libraries, as it allows you to run animations. Also on their website, they have a lot of animation options to download and use in your project using the Xamarin Lottie Library.

When using it, instead of having a normal Activity Indicator you have a cool animation. You can check all the loading animation options here.

A time ago, I wrote a step-by-step article on how to use it.

3. Use SkiaSharp

SkiaSharp is a Xamarin Forms library that allows you to create your own animation, it gives you full flexibility to create the animation you want. So why not use it for loading indicators? TharsanP did an article about this.

4. Use Syncfusion BusyIndicator

Syncfusion is also a great option, they have a library called SfBusyIndictor with predefined animations that you can use to replace the normal activity indicator.

5. Use StateLayout

StateLayout is a great functionality added by Steven Thewissen to the Xamarin Community Toolkit. It allows you to display a specific view when your app is in a specific state, it is a common behavior in apps like Facebook and Instagram.

For those scenarios where you are loading data to display into lists, this is the best option to use.

6. Use a Progress Bar

If you can estimate how long the request will take, you can use a progress bar. It entertains the user while waiting and will give him the feeling that the time is less.

Is important to mention that the estimation doesn’t need to be exact since once the request is done, you can change to progress bar to 100%.

SomesTechies has a great article about on how to create an animated progress bar.

7. Do Background loads when possible

As we know loading/uploading data in the background is faster and provides flexibility so that the user can still use the application while that action is taking place. Of course, using it will make more sense for those scenarios where you are loading heavy data

A good example of it is Instagram/Facebook when uploading, after the app finishes doing the background uploading process the user gets a notification that is done. Also doesn’t block the user since you can continue using the app while uploading the post.

To upload data in the background the Shiny plugin is a good option and to show a local notification you can use the Toast.Forms.Plugin.

–

Which one should I use?

As you see there are a lot of loadings types you can use, but which one to use will depend on the scenario, according to what I had read about UX good practices in mobile these are the rules I usually use:

• Loading data that will take a significant amount of time: Load the data in the background and notify the user once it is done.
• Loading data and displaying it into lists: Use StateLayout.
• Action that requires that user can’t use the app while it is executing it (ex. processing a payment, etc): Use a blocking loading that can’t permit the user to leave that screen, to achieve it you can use a PopUp with an animation of SkiaSharp or Lottie.
• Action that allows the user to continue using the app while it is loading: Use a no blocking loading ex. Syncfusion.
• You can provide an estimation of how long a request could take: ProgressBar

That’s all for now, I hope this article has been helpful for you.

Happy coding!