bcgov
ASA Go: Create a Visual Cue when Loading Data, or Error, on Mobile
Describe the task Mobile Loading Indicator
Acceptance Criteria
- [x] (UX) Spinner should be informative
- [x] (UX) Spinner should be easy to read on mobile and desktop
- [ ] Spinner needs to be on every tab
- [ ] Active on any action that triggers a network call
Additional context
- Use the Material UI Spinner
- Map vs other views
Please use the MUI spinner: https://mui.com/material-ui/react-progress/#circular-with-label, and if it's easy enough, double the size of the circle and text. Thanks.
Added component that could be used for both desktop and mobile. Grouped near the 'About this Data' it would show on the top right of the screen. Since loading can sometimes get stuck, there should be a Cancel button to allow the user to return to their current/cached data.
Desktop: https://www.figma.com/design/yGPwOBayMeThQaRpkkZIGx/AutoSpatialAdvisory?node-id=413-4278&t=KghjYH3dhB3KSaCy-4
Mobile: https://www.figma.com/design/yGPwOBayMeThQaRpkkZIGx/AutoSpatialAdvisory?node-id=418-6159&t=KghjYH3dhB3KSaCy-4
For mobile, placed also at top right for consistency but it might be too small especially with the Cancel button to be practical. If so, mobile should have a full screen, semi-opaque dark background with the label, spinner and cancel button centered vertically and horizontally.
https://www.figma.com/design/yGPwOBayMeThQaRpkkZIGx/AutoSpatialAdvisory?node-id=418-6496&t=KghjYH3dhB3KSaCy-4
Figma mockup for showing the loading of an individual layer (in the layer switcher), and for showing an error when loading a layer (dismissible)
Raj to look into what OpenLayers offers for UI indications of error in loading a layer.
Error state looks good! Which mockup is the final one for loading? Is it a single loading spinner for all layers?
Assuming there's an error state, what are your thoughts on how the user can retry to get the layer?
