Increase user confidence in reload times by adding a progress bar

[SCdF]

Background

Our app takes a long time to reload, especially on phones. A CHW whose data I am modeling this on takes ~60 seconds to complete a refresh on an android phone that is likely to be deployed.

CHWs also refresh a lot more than we expect / that we'd like, as a lot of our app's performance issues are front-loaded: in the above example ~10 seconds of JS parsing (probably), and the majority of the rest being PouchDB bootup stuff (pulling data into memory, executing queries to get nools to work).

Since CHWs refresh a lot and our loadtimes are really long, we should try to increase their confidence in this process as much as possible.

Implementation

Let's change our loading from a throbber to an accurate progress bar:

• Find the earliest and latest parts of our JS that are executed as part of initial load. I'm pretty sure this is the top of app.js and after the RulesEngine.init promise has resolved.
• Replace the progress throbber with a progress bar. This progress bar should be able to support unknown time (eg a full bar that animates) as well as known time (eg a bar that fills)
• Whenever we refresh (ignoring bootstrapping, as that takes a non-normal amount of time), store the datetime and time it takes between the earliest and latest parts above in a cookie. Store the last 3 in that cookie.
• Whenever we refresh, if we have data in the cookie then take the average, and use it to display a timed progress bar. If we don't have any data then use the unknown time variant.

We should keep our messages about what it's doing and use that to make it even clearer that something is happening.

We should consider what to do if the progress bar fills up and it's still loading. Perhaps display some kind of "hang on!" message?

[billwambua]

I strongly second this.

I was in the field in Togo to check the situation on the ground because CHWs, nurses and supervisors were complaining that the app is too slow.

So when I got to the field, I sought to establish the time taken. First, I asked them how long it took them for a certain action e.g How long it takes to open the Contacts tab when you restart the phone/app.

Starting with CHVs, they mentioned times of around 4-5 minutes from opening the app to the Contacts page and searching for a person. I did the same action with several of their phones and timed it on the Stopwatch app. I got times like this:

      first load after shutdown - 17.26s
      then reports page - 6.12s
      then Contacts Page – 7.10s
      search word 'famille' under Contacts Page - 9.25s 

If you add that up, you get 39.73 seconds. Of course you consider that they don't press a tab immeadiately it loads so let's take that up to a minute or a bit more. It's still a far cry from the estimated 4-5 minutes.

As for nurses, they reported 8-10 minutes from startup to getting a patient. The actual times hovered around the below test:

      first load after shutdown - 23.05s
      then reports page - 42.56s
      then Contacts Page - 2min10.51s
      Click 'Zone K1' - 3.46s
      search word 'famille' under Contacts Page 23.14s

This adds up to 3Mins 42.72seconds. Compare that to 7-10 minutes estimate.

Which leads to the conclusion: there is something about staring at a blank screen with only a spinning animation for more than 10 seconds that makes time elapsed seem more than it actually has.

We should give some feedback to the users. If it took 15 seconds to load the reports tab from shutdown yesterday, it will probably take the same give or take today. So we could use that at least to build the first iteration of this feature.

cc @aikajanet @abbyad

[SCdF]

Thanks @billwambua for the awesome awesome feedback!

[aikajanet]

@maremegaye

[n-orlowski]

Similar to https://github.com/medic/cht-core/issues/5618

[latin-panda]

As today, webapp displays an animated spinner that indicates loading, it also displays some feedback about what's going on behind the scenes: Downloading app… Loading app… Checking data… Polling replication data… Cleaning data… Cleaned 10 documents… Fetching info 0 of 46… Starting app…

However, there are still some processes executing that we don't display feedback, so it only displays the spinner. The improvement of this issue will be addressed in this ticket . Closing this one for simplicity.