Improve the presentation/accessibility of file attachments while loading.

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

chipx86
Review Board
release-4.0.x
reviewboard

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
finished.

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.

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

chipx86
chipx86
david
  1. Ship It!
  2. 
      
chipx86
Review request changed

Status: Closed (submitted)

Change Summary:

Pushed to release-4.0.x (35c4b27)
Loading...