Cht-core: Show loading progress when app is starting

[alxndrsn]

Currently the app just shows a spinning wheel while it's starting. More information could be given, because there are clear stages to this loading process:

• loading assets (JS, CSS) that have not loaded already
• loading docs (we can track progress of this)
• having a little think while hiding behind the spinner

This will give people an idea if the app is actually doing the first sync without having to plug a cable and look at Chrome console.

[alxndrsn]

@garethbowen this seemed like a really obvious improvement to make while working on #3357.

Sadly all the text is in English, but it doesn't seem _that_ important, and I've tried to keep it to a minimum. And seeing as the error-on-startup text is all in English too (and much more functionally important) it seems like a reasonable compromise.

[garethbowen]

Agreed it's a shame about the internationalisation, but until we sync everything down we don't have the data to do the translation. We could work around it by replicating certain docs first, but that could get quite complicated... This is great for now!

[sglangevin]

Just got a chance to check this out. It's so nice to have some information about what is happening behind the spinner! I found it confusing that it went from telling me a number of docs to displaying 100%. I'm guessing that showing a percentage progress is more work? If so, can we change from 100% to "all docs loaded, starting app" or something else so that the user knows that everything has been downloaded?

[alxndrsn]

I'm guessing that showing a percentage progress is more work?

Correct, it's impractical to calculate how many docs need to be downloaded from the server as this calculation would take almost as long as the actual download!

can we change from 100% to "all docs loaded, starting app"

👍 YES WE CAN! 👍

However, because this message is displayed before the translation module is available, we _cannot_ translate this message to other languages. I thought _100%_ would be more generally understandable than something in English.

[sglangevin]

Yeah, that's a good point. I found 100% to be odd, given that I hadn't seen a percent progress before that. I'm going to collect feedback from a few others and get back to you, but I think that using English for that would be ok as it's mostly the person initially setting up the phone who sees that message anyway and we provide an installation guide with screenshots and description of what to expect.

[alxndrsn]

it's mostly the person initially setting up the phone who sees that message

They'll be the one seeing 123 docs… for the longest time. The final 100% message will be seen by users when they re-open the app I think. Anyway, it's not hard to change the text so just let us know when you've settled on something.

[sglangevin]

@diannakane @amandacilek any thoughts on this one? We're not looking to update the UI, just wanting to confirm the labels that users see. If you log in to alpha.dev as a CHW user, you'll see the messages there. These can't currently be translated so they will appear in English for everyone for now. PM me if you need a login.

[diannakane]

First question: does it have to be text? Could it be a graphic or simple animation to account for the internationalisation?

[sglangevin]

This was something that was added just as a quick thing, hence the fact that it is currently text. For now, I'd say let's stick to text as that is easy to change and we can improve to something better later. @alxndrsn can probably comment on the ease/difficulty of animation here as well as the ease/difficulty of internationalization.

[amandacilek-zz]

My 2 cents:

Can it just say "Loading assets..." and then "Starting app..."?

It already has a very simple circle spinner animation. Might be fun to create our own custom looping animated GIF at some point. It could either illustrate what is happening (show file icons flying from one place to another, for universal international understanding), or it could be a play off our logo maybe with the logo flying about.

[alxndrsn]

Can it just say "Loading assets..." and then "Starting app..."?

This would miss the step of docs being fetched from the server, which is the slowest part.

Without the document download count, the user is left staring at a spinning disc. When fetch docs is very slow it just looks like the app has crashed. The doc count was added so that we can tell that progress is actually being made without having to connect the phone to a computer.

[alxndrsn]

comment on the ease/difficulty of animation here as well as the ease/difficulty of internationalization.

We already have a looping animation, so it's not difficult. However, the current animation is good because it doesn't require gifs and only requires minimal code to be downloaded.

(On the other hand, it's probably not great for battery life compared to a GIF, although I doubt testing this theory is worth the effort.)

I think internationalisation would be possible, although the mechanism would be different from other translations in the app.

[sglangevin]

I'd prefer it if we can agree on some text with the existing animation for now. @diannakane @amandacilek I've suggested the following:

• Loading assets
• [number] docs loaded
• All docs loaded, starting app (instead of 100%, followed by starting app)

Do either of you have other suggestions? Let's decide on a solution for now and we can revisit in the future. We could also just go from ## docs loaded to starting app (skipping 100%).

[diannakane]

I'm not sure what "assets" and "docs" refer to. We don't use these terms
anywhere in the app.

"This would miss the step of docs being fetched from the server, which is
the slowest part." >> Does this happen even when starting the app without a
data connection?

How about:

• loading app
• fetching info or updating app
• starting app

[sglangevin]

Does this happen even when starting the app without a
data connection?

This happens only on first run. Once you've installed the app and downloaded the initial data, you'd only ever see "Starting app" again. The steps here are meant to cover first run (app installation, usually done at HQ), though it's likely that CHW users would see the last step here: "starting app" when they re-open the app later (both online and offline).

I think we should avoid "updating app" because it's not technically accurate. We're just downloading all of the files that need to be stored offline (initial sync). What about:

• Loading app
• Fetching info (or downloading data)
• Starting app

[sglangevin]

@alxndrsn can we change the text labels to the ones in my previous comment?

• Loading app
• Fetching info (show # of docs)
• Starting app

[sglangevin]

Moving to ready (changes made in #3541).