Invoke detailed loading screens on First Login

[simongamester]

When users log into Helm for the first time, there may be a delay between 10 and 120 seconds whilst records are retrieved. We have updated the spinner to include a progress bar and top tips during this waiting period, however these changes will remain hidden by default.

3 new classes can be added to the body class along to set the behaviour:

• "progress-short" OR "progress-long" is used to determine the speed of the progress bar i.e. 5 seconds or 120 section to fill up
• "with-tips" Shows the top tips, a slideshow of 10 health tips. It also displays the short progress bar by default.

Below is an example of the short loading progress bar with tips. Body class is: "loading with-tips progress-short"
http://jsfiddle.net/rootsol/eo15umbn/3/

Below is an example of the long loading progress bar with tips. Body class is: "loading with-tips progress-long"
http://jsfiddle.net/rootsol/eo15umbn/4/

The application already sets the "loading" class when first logging in. We therefore need to add "with-tips" and "progress-long" ONLY when the user first logs in. If the loader is called elsewhere, these classes should not be added, which would default back to displaying just the spinner.

[BogdanScherban]

@simongamester

Simon, we looked at code examples in Jsfiddle, and we can suggest the following:

1. It isn't difficult to add class to , but we can't define connection speed and required connection time. For this reason we can't understand what type of progress bar (short or long) should we use. Or we have to always use "progress-long"?

2. When this information should be displayed?
   If it should be displayed after first user login - should we locate it after login in and before Terms and Conditions appears?

[simongamester]

1. My understanding is that connection speed won't make the difference between 5 seconds and 120 seconds, it's the amount of medical records that etherCIS needs to aquire before the user can access the system. That's why we're only applying this loader to first login and not in all cases. I suggest we default to the long progress bar initially, however if we can determine the approximate amount of time it will take to aquire the records, we should use this to switch between the long and short progress bars accordingly. Rob - do you have any thoughts on this?

2. The loader (main spinner) currently gets displayed after submitting the code received via sms message (see login.myhelm.org), which falls after the Terms and Conditions pop up. The terms and conditions is part of the login screen, not react, so won't have any influence on this. We therefore need to just update the loader from the point of submitting the SMS code up until the patient dashboard is displayed. Please note however that this should only be for first time logins.

[simongamester]

A quick update to the above:

1. The with-tips and progress-short classes should be applied to the loader in all instances when logging in, not just when they're logging in for the first time. The api/initialise contains a new_patient property (documented here - New /api/initialise handling procedures for PulseTile #277). When this is set to true, use the patient-long class, when false use patient-short.