Show thumbnails as soon as they're received

[oparoz]

Current situation

• The app sends X requests to the preview system to generate Y thumbnails at a time
• At the same time, the view asks for a row
• Elements are added to the row one at a time
• The script waits for the thumbnail to be available <- This is blocking the rendering of the row
• Thumbnail is added to the row and total width is checked against max width (browser window)
• When the row is full, it is rendered

The thumbnails needs to be analysed so that the row can be composed to fit and look nice. If we only generate thumbnails of 400x200, then the view will be plain looking.

Ideal situation

• Identical first steps
• As soon as a thumbnail is received, it is used to populate the row
• To the user, the view is filled one thumbnail or album at a time

Next steps

Feasibility study

• Collect requirements
• Calculate effort required
• Build proof of concept
• Implement

IE8 is not supported

Solution

Screencasts

Note: the refresh rate in the videos is quite low, so this is not reflective of the smootheness of the animation

With cached thumbnails
http://screencast-o-matic.com/watch/cDn6n7hR39

You can see that once the album is cached, there is no resizing taking place any more

On an empty cache
http://screencast-o-matic.com/watch/cDn6nEhR3E

Features:

• Semi-opaque row while it's being filled
• Spinners on images in albums
• Spinners on single images on row (with caveat, see below)

Caveats

• Since we don't have the real size of the images, the next image or its spinner are sometimes misaligned. It's currently impossible to fix and has to be accepted as a side-effect of being able to show some information before having the full picture
• When resizing the window on a desktop, there is a flashing effect as each time the wall is being redrawn, the opacity goes back to being semi-transparent until the images are resized. In my experience, the fix involves introducing and monitoring a state to know if we're currently in a resizing loop. I don't think it's worth for me to invest time to improve this, but a PR can certainly be introduced later if someone finds a better way
• On low powered devices, there may be a bit of stuttering when resizing very wide images. I find this acceptable, compared to the advantages.

[theCalcaholic]

Would it be possible to request not 20 specific thumbnails but the first 20 of, say, 100 which already have been generated on the server?

This would not solve the actual issue though;

[oparoz]

Doing it that way would mess up the sorting order of the media files.

[oparoz]

What I have in mind does not work on IE8 and I'm not going to keep 2 rendering engines, just to have a fallback for 1% of users, so it will be a Gallery+ exclusive if this lands before IE8 support is dropped from ownCloud.

[oparoz]

PR is in #511

[oparoz]

Will be in 9.1. Feel free to open new issues if you feel this can be improved.