Make WordPress Core

Opened 2 years ago

Last modified 20 months ago

#55302 new defect (bug)

Improve media library upload progress indicator

Reported by: adamsilverstein's profile adamsilverstein Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version:
Component: Media Keywords:
Focuses: Cc:

Description

When uploading in the media library, the progress bar shows the upload progress of the image.

Once the image is fully uploaded WordPress creates the sub-sized images used to serve images on the front end. Depending on your configuration (theme, plugins, server), and the upload size this can take quite a while to complete. During sub-sized image creation, the progress bar for the image shows as "full". Finally, when the image sub size generation completes, the image changes from a gray box to the thumbnail of the uploaded image and if multiple images have been uploaded, the uploader moves on to the next image. Screencast attached.

The problem here is that no progress is shown for the image regeneration phase.

Uploading in the block editor works a bit differently: as soon as the image is dropped onto the editor to upload, a grayed out version of the image is shown with a spinner. The spinner spins during the upload and continues spinning during sub-size creation. Finally, when all sub sizes are created, the image becomes fully saturated and the spinner goes away. Looks like this is changing to a progress bar though, see https://github.com/WordPress/gutenberg/issues/13984 & https://github.com/WordPress/gutenberg/tree/trunk/packages/block-editor/src/components/media-upload-progress

Two potential improvements we could make in the media library:

  1. immediately show the thumbnail of the dropped image instead of the gray box
  2. switch to a spinner entirely, or for the image regeneration phase or try to show actual progress. The challenge with showing progress is we don't know how long the request will take on the server.

Attachments (2)

media-uploads.mp4 (4.8 MB) - added by adamsilverstein 2 years ago.
cat.mp4 (726.3 KB) - added by adamsilverstein 2 years ago.

Change History (4)

@adamsilverstein
2 years ago

This ticket was mentioned in Slack in #core-media by adamsilverstein. View the logs.


2 years ago

This ticket was mentioned in Slack in #core-js by lewiscowles. View the logs.


20 months ago

Note: See TracTickets for help on using tickets.