Background

When fetching media resources via network requests (like images or videos URLs), a loading indicator is displayed during the request to show the user the request is active.

This loading indicator pattern can be used across a handful of blocks that implement network requests:

• Embed (current implementation)
• Image (proposed implementation
• Video (future implementation)
• Gallery (future implementation)
• Cover (future implementation)
• Media & Text (future implementation)
• Audio (future implementation)

Currently, there is not a consistent style for implementing these loading indicator pattern, which consists of displaying a loading indicator icon and a transparent background above the media (see screenshot below). The loading indicator component implements React Native's ActivityIndicator, which itself displays the appropriate native circular loading icon for iOS and Android.

There is also room to implement a consistent, shared loading indicator style by using a dedicated loading indicator component, similar to how it is currently implemented in the Embed block here.

Current Examples

Media loading indicators for iOS (left) and Android (right):

Next Steps

Based on design feedback, the current loading indicator styles can be improved, which can be discussed in this issue.

For discussion, potential work could include:

• Evaluating which blocks should implement these loading indicator styles from the list above.
• Fine-tuning existing loading indicator styles.
• Evaluating pros/cons of using a dedicated loading indicator component to implement the pattern above.