Add a Sync Progress component for subsequent sync

[Gental-Giant]

Problem we are trying to solve Currently, when a user is conducting sync, initial or subsequent, they are hard pressed to know the progress of the sync until it is completed. This does not make for a good user experience; the user may abandon the sync process or sometimes think there is somethign wrong with the application; to them, it seems like there is nothing happening.

User Story As a user, I want to see the sync progress when interacting with the app. I want to decide whether to proceed with sync as I do other things or simply wait for it to complete. I want to be aware whether there are processes happening on the app even when it seems like nothing is happening. This is especially necessary when I have a lot of data on my device that may take some time to complete syncing.

Describe the feature request. We would like to update the UI/UX for manual sync. This would be done by updating the UI to allow users to know when they have unsynced data, and track sync progress and final status.

This ticket is to specifically add tracking and updating the subsequent sync status.

Implementation

• [ ] When the sync button is tapped, image a (see screenshot below)

  • [ ] User is navigated to the default register with a persistent sync progress component as shown in image (b)
  • [ ] Sync progress component should also be shown on the nav menu as seen in image (d) below. The sync component replaces the manual sync button when sync is in progress.

• [x] Sync progress component should:

  • [x] Indicate the percentage of sync
  • [x] Have a progress bar that reflects the % the sync is at.
  • [x] Indicate time remaining for sync to complete.
  • [x] Have the spinner icon spinning so the user doesn’t assume the app/sync froze.
  • [x] Cancel button to cancel the sync at any time as shown.
  • [x] Minimize component button as shown above.
  • [x] After 10-seconds since starting sync, the sync progress component will be automatically minimized as shown on the image.

• [ ] When the sync component is minimized show:

  • [x] A progress bar
  • [x] A maximize button
  • [ ] A spinner icon

• [ ] When the cancel button is tapped, display a confirmation dialog:

  • [ ] keep syncing dismisses the dialog
  • [ ] Stop sync cancels sync
  

• [ ] When sync is complete (All data has been synced to the server):

  • [ ] Sync complete component is displayed for 10 seconds after sync is complete.
  • [ ] The sync complete component will be sustained until there is new unsynced data in the app.
  • [ ] If there is unsynced data, this component is replaced by the manual sync button.

• [ ] Not all data has been synced to the server.
  • [ ] Error message is displayed.
  • [ ] The sync component has a retry button and tapping the retry should restart the sync.

Acceptance criteria All the items above work as they should.

Area path

1. Login to the app
2. Open Navigation bar
3. If there is no unsyced data, sync button should appear as on image (a)
4. If there are unsyced data, sync button should appear as on image (b)

Implementation plan (For Engineers) The plan for implementing the solution e.g. via a description or a check list for the various ordered tasks that will need to be completed. i.e. Describe how you intend to solve the problem

[dubdabasoduba]

@Gental-Giant @AnnieMungai @HenryRae Do you mind giving a use case on why we would want to cancel sync?

This is based on the UI Mocks above

[HenryRae]

These are very general, not project based.

1. One might want to cancel sync if errors are found in a patient record. To prevent incorrect data from being uploaded, they might want to cancel, edit record, and re-initiate sync.
2. During network issues, one might want to cancel ongoing sync to avoid the long wait and retry next day.
3. Maybe due to unanticipated data volume, one might want to cancel ongoing sync to plan for sync during off-peak hours.
4. Very UX based. Misclicking manual sync, we should definitely allow user to cancel...

[Gental-Giant]

To add to @HenryRae second point,

2. During network issues, one might want to cancel ongoing sync to avoid the long wait and retry the next day.

Sometimes based on network connectivity users switch networks. Instead of waiting for sync to fail then retry might make more sense for users to cancel and retry.

Overall, I think having the option to cancel gives users the sense of being in control.

[AnnieMungai]

@Gental-Giant @AnnieMungai @HenryRae Do you mind giving a use case on why we would want to cancel sync?

This is based on the UI Mocks above

@dubdabasoduba Anticipated use case in the field:

1. User needs to free up device RAM while performing other tasks on the app - canceling/pausing sync will ensure user is not .lsowed down.
2. The internet is slow and sync is taking too long - user may choose to cancel/pause sync in this instance and get back to the sync when the internet speed is better.
3. The user battery may be running low so they need to pause/stop sync to preserve battery life for other key activities.

However, all these scenarios beg the question - why not simply disconnect the device from the internet? Note! in some instances, the users are prevented from conducting any admin tasks on the device including connecting and disconnecting from internet etc. This is an edge case.

[AnnieMungai]

PM comments

EUSM 2.0.0.Rc4

• [x] Sync progress bar not showing when subsequent sync is triggered from the settings page.
• [x] Conflicting error messages on the register page, the settings page and side panel.
  
  • [x] If sync completes successfully without errors- sync completed message is shown.
  • [x] If sync was completed with errors sync completed with errors message is shown.
    • [x] Sync bar percentage stuck at 0% for a long time. Then the sync complete message pops up.
    • [x] Tapping on the manual sync button sometimes does not launch the manual sync (@AnnieMungai to chat with Mark on how this is expected to work).