opensrp
Quest: Improve UX for incremental loading of page
Describe the feature request. The UI for client profiles has been updated to display data incrementally as soon as it's loaded. The UI might momentarily show nothing or display text that there is no data for a specific data point and then show this later on. It's not intuitive that this section is not completely loaded and might need to be updated for this
Additional context
https://user-images.githubusercontent.com/31766075/232784600-ca92ffdf-7535-4e34-beef-7d8d2c4f818d.mp4
Acceptance criteria TBC after consultation with the design team
Area path A list of ordered steps in the app on usage of the feature to support anyone testing it e.g. Code reviewer, QA e.g.
- Login to the app
- Open Navigation bar
- Click on Children register
- Click on Mumbi's, F of ~3y profile
- Observe the Immunizations at birth
Implementation plan (For Engineers) (TBC) 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
This issue requires discussion with the design team to approve the desired UX for the progress bar before adding the acceptance criteria and commencing on the desired enhancements CC @ekigamba @HenryRae
NB. marking as blocked
What do we want to archive or solve with this type of loader? @ekigamba cc: @ndegwamartin
What do we want to archive or solve with this type of loader? @ekigamba cc: @ndegwamartin
@HenryRae we want to basically avoid surprising the user with new content for the sections that load after the profile page shows at the bottom (see sample video)
One way could be to have a small spinner at the bottom in the white space where the content is meant to render after data load. Then once it loads another spinner below it for the next item. Note, there could be multiple items that show up later.
@HenryRae to follow up with @ndegwamartin on the next steps for this ticket
@f-odhiambo for what we have works okay. Further explorations will be done later cc: @ndegwamartin