Use shared loading indicator styles

[derekblank]

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.

[derekblank]

Design feedback from @iamthomasbishop regarding the loading indicator styles introduced on the Image block:

The iOS one in particular looks a bit weak in terms of contrast. Do we have control over the color/style of the loading indicators? If so, I'd suggest that we make the base color white on iOS. For Android, I would suggest that we change the base color from the standard green-ish to our primary accent blue (blue 50 in light, blue 30 in dark). Note: my suggestion assumes that the scrim/overlay is always dark — if we're inverting the overlay between appearance modes, we'd also invert the colors mentioned above)

The indicators look a bit small (especially on Android) so I think we might want to increase the size of both slightly (by either 1.5x or 2x), but let's try implementing the color details I mentioned above first to see if that is sufficient. I haven't tried this on a device yet so it might be less of a concern on-device.