Improve the presentation/accessibility of file attachments while loading.

Review Request #11340 — Created Dec. 18, 2020 and submitted

Review Board

When loading a review request with file attachments, we'd show a spinner
with a little status message, and eventually replace it with loaded file
attachment data as soon as the JavaScript had finished executing. We
have it this way in order to avoid duplicating a lot of file attachment
setup logic in the template.

This ultimately led to a fairly annoying page jump on load, and wasn't
particularly pleasant from a user's point of view.

This change implements a sort of half-way version of this. We now
display placeholders for each thumbnail, just the box for the attachment
without any thumbnail or identifying information. This is displayed
faded out, and a new-style spinner is displayed next to the "Files"
header, making it clear that we're still loading.

Accessibility hints were added so that screen readers can be aware when
the attachments area is still in the process of loading and when it has

Loaded a page with file attachments. Saw that there was a placeholder
thumbnail for each of the attachments, which were then replaced with the
real ones.

Checked the accessibility states before/after load.

Improve the presentation/accessibility of file attachments while loading.
Loading file attachments...

  1. Ship It!
Review request changed

Status: Closed (submitted)

Change Summary:

Pushed to release-4.0.x (35c4b27)