Problem

There are certain areas of our platform which users have to wait while content is loaded. We currently use spinners however these do not feedback to the user about what is going on (reason for loading, loading progress, or what content is being loaded). Users need to be more engaged with the loading process.

CURATE could potentially handle very high numbers of image data and may or may not currently use our spinner to demonstrate loading. The potential lack of good user feedback can result in a poor UX.

Solution

A skeleton screen is a common UX feature used in other platforms like LinkedIn, Youtube etc. These screens give the user feedback on what content is loading (used on for front-end loading, not back-end e.g. image upload) where rough grey shapes are replaced by the loaded data (text or images).

The skeleton screens for CURATE handles images on a light grey background (#F2F2F2). Images should be represented by a box and use the pulsate animation with the colours moving between #D8D8D8 and #AAAAAA.

This should only occur when a project has data.

Loading will depend on how our backend loads data. I currently believe we do not make use of lazy loading so the skeleton screen will likely remain active until all the data has loaded in. Ideally the data on the screen should load first with other data loading as a user scrolls.

Adobe XD: https://xd.adobe.com/view/f4c2a3ac-a12e-49ff-8287-abe9c3f938a1-a191/

Considered Alternatives

N/A

Additional Context

Material UI offers a skeleton screen component - see documentation.
Stackflow offers a solution to set animation speed - see thread.