Display progress indicators

[swissspidy]

It would be helpful to display more or less accurate progress bars.

We can display a progress bar and split it into multiple sections to "fake" it. For example:

• 0%: Freshly added
• 10%: Prepare item
• 70%: Transcoding (split this 60% difference across the transcoding steps, i.e. if there are 3 steps each advances by 20%)
• 100%: The upload itself

What about client-side thumbnail generation? Each thumbnail wouldn't (only) have its own progress bar, but contribute to the parent's progress. So the parent can never be at 100% if the sub-sizes are still being uploaded.

Accurate progress indicator for the upload is probably not possible because that requires streams (or XHR, yikes). So again, fake it.

For transcoding itself, we could leverage https://github.com/kleisauke/wasm-vips/issues/63#issuecomment-1913696934 to get more accurate progress info from vips. To implement, we need to pass a callback to the worker, which the worker can then call whenever there is progress.

Note: this might require using the retain and release methods from @remote-ui/rpc (which are re-exported by @shopify/web-worker). See https://github.com/Shopify/remote-ui/tree/42cbc05da3f13b2338cfb05d0225fb9f7076d831/packages/rpc#memory

Caveat: if the onProgress callback updates Redux state this would cause a lot of state updates. But I don't see how this could be avoided right now.

Progress could be displayed in the sidebar and in the upload indicator menu.

NB: Would be good to solve #326 first.

[swissspidy]

The new wasm-vips version with progress info is now available, see #389

[swissspidy]

There isn't really any need for this in the UI.