What is the recommended pattern for progress indicators when waiting for data in Windows UWP apps?

Question

Let's say I have an app built like the Microsoft weather app.

On launch of app I need to download the forecast from the internet. While waiting to do so I also need to display a progress indicator. Which of the following (if any) is recommended?

1. Render the page fully with navigation controls (hamburger side menu) as well as page content (but without values since they are data bound). Then overlay a modal control like a popup with a progress indicator inside and a cancel button.

2. Render only the application root shell with the progress indicator inside (no other content, or navigation controls like hamburger menu are visible). Then once the task is complete, navigate to the home page with content.

3. Render the home page with content and navigation controls, but hide only the content (with visibility = collapsed) and show a progress indicator in its place. Once data is downloaded hide the progress indicator, and show the content.

I don't know which one of these I'm supposed to use. Is there a recommended way to do this?

Or is there a better way I didn't think of?

Answer 1

There is no one perfect answer for this question but I will try to explain the most common solution. None of points above is good or bad. It is better to concentrate on the user experience.

Render fully page with navigation controls and display loading popup is not really bad idea - user see the whole page with progress ring for instance and has chance to cancel it. But remmber that if data is not loaded or user abort pulling it there will be empty content in the app (if this is first time when user launched the app).

One of the best solutions for scenario you wrote is to use extended Splash Screen. Once you app is launched first Splash Screen is displayed and when you extend it, you can add progress ring to indicate that data is being retrieved. This is very elegant way to present to the user.

Please see below guidline how to do it:

UWP Extended splash screen