{"action":"closed","issue":{"url":"https://api.github.com/repos/owncloud/gallery/issues/29","repository_url":"https://api.github.com/repos/owncloud/gallery","labels_url":"https://api.github.com/repos/owncloud/gallery/issues/29/labels{/name}","comments_url":"https://api.github.com/repos/owncloud/gallery/issues/29/comments","events_url":"https://api.github.com/repos/owncloud/gallery/issues/29/events","html_url":"https://github.com/owncloud/gallery/issues/29","id":58283348,"number":29,"title":"Show thumbnails as soon as they're received","user":{"login":"oparoz","id":323220,"avatar_url":"https://avatars.githubusercontent.com/u/323220?v=3","gravatar_id":"","url":"https://api.github.com/users/oparoz","html_url":"https://github.com/oparoz","followers_url":"https://api.github.com/users/oparoz/followers","following_url":"https://api.github.com/users/oparoz/following{/other_user}","gists_url":"https://api.github.com/users/oparoz/gists{/gist_id}","starred_url":"https://api.github.com/users/oparoz/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/oparoz/subscriptions","organizations_url":"https://api.github.com/users/oparoz/orgs","repos_url":"https://api.github.com/users/oparoz/repos","events_url":"https://api.github.com/users/oparoz/events{/privacy}","received_events_url":"https://api.github.com/users/oparoz/received_events","type":"User","site_admin":false},"labels":[{"url":"https://api.github.com/repos/owncloud/gallery/labels/20","name":"20","color":"5319e7"},{"url":"https://api.github.com/repos/owncloud/gallery/labels/design","name":"design","color":"cc317c"},{"url":"https://api.github.com/repos/owncloud/gallery/labels/enhancement","name":"enhancement","color":"02e10c"},{"url":"https://api.github.com/repos/owncloud/gallery/labels/feature:photowall","name":"feature:photowall","color":"d4c5f9"},{"url":"https://api.github.com/repos/owncloud/gallery/labels/performance","name":"performance","color":"fbca04"},{"url":"https://api.github.com/repos/owncloud/gallery/labels/QA%20-%20Testing","name":"QA - Testing","color":"02d7e1"},{"url":"https://api.github.com/repos/owncloud/gallery/labels/sponsor%20needed","name":"sponsor needed","color":"eb6420"}],"state":"closed","locked":false,"assignee":{"login":"oparoz","id":323220,"avatar_url":"https://avatars.githubusercontent.com/u/323220?v=3","gravatar_id":"","url":"https://api.github.com/users/oparoz","html_url":"https://github.com/oparoz","followers_url":"https://api.github.com/users/oparoz/followers","following_url":"https://api.github.com/users/oparoz/following{/other_user}","gists_url":"https://api.github.com/users/oparoz/gists{/gist_id}","starred_url":"https://api.github.com/users/oparoz/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/oparoz/subscriptions","organizations_url":"https://api.github.com/users/oparoz/orgs","repos_url":"https://api.github.com/users/oparoz/repos","events_url":"https://api.github.com/users/oparoz/events{/privacy}","received_events_url":"https://api.github.com/users/oparoz/received_events","type":"User","site_admin":false},"milestone":{"url":"https://api.github.com/repos/owncloud/gallery/milestones/1","html_url":"https://github.com/owncloud/gallery/milestones/Performance%20fixes","labels_url":"https://api.github.com/repos/owncloud/gallery/milestones/1/labels","id":989377,"number":1,"title":"Performance fixes","description":"","creator":{"login":"oparoz","id":323220,"avatar_url":"https://avatars.githubusercontent.com/u/323220?v=3","gravatar_id":"","url":"https://api.github.com/users/oparoz","html_url":"https://github.com/oparoz","followers_url":"https://api.github.com/users/oparoz/followers","following_url":"https://api.github.com/users/oparoz/following{/other_user}","gists_url":"https://api.github.com/users/oparoz/gists{/gist_id}","starred_url":"https://api.github.com/users/oparoz/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/oparoz/subscriptions","organizations_url":"https://api.github.com/users/oparoz/orgs","repos_url":"https://api.github.com/users/oparoz/repos","events_url":"https://api.github.com/users/oparoz/events{/privacy}","received_events_url":"https://api.github.com/users/oparoz/received_events","type":"User","site_admin":false},"open_issues":0,"closed_issues":6,"state":"open","created_at":"2015-02-21T14:01:33Z","updated_at":"2016-03-01T01:09:10Z","due_on":null,"closed_at":null},"comments":5,"created_at":"2015-02-19T22:52:20Z","updated_at":"2016-03-01T01:09:10Z","closed_at":"2016-03-01T01:09:10Z","body":"## Current situation\r\n* The app sends X requests to the preview system to generate Y thumbnails at a time\r\n* At the same time, the view asks for a row\r\n* Elements are added to the row one at a time\r\n* The script waits for the thumbnail to be available **<- This is blocking the rendering of the row**\r\n* Thumbnail is added to the row and total width is checked against max width (browser window)\r\n* When the row is full, it is rendered\r\n\r\nThe 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.\r\n\r\n## Ideal situation\r\n* Identical first steps\r\n* As soon as a thumbnail is received, it is used to populate the row\r\n* To the user, the view is filled one thumbnail or album at a time\r\n\r\n## Next steps\r\n#### Feasibility study\r\n- [x] Collect requirements\r\n- [x] Calculate effort required\r\n- [x] Build proof of concept\r\n- [x] Implement\r\n\r\n**IE8 is not supported**\r\n\r\n## Solution\r\n\r\n### Screencasts\r\n\r\n*Note: the refresh rate in the videos is quite low, so this is not reflective of the smootheness of the animation*\r\n\r\n**With cached thumbnails**\r\nhttp://screencast-o-matic.com/watch/cDn6n7hR39\r\n\r\nYou can see that once the album is cached, there is no resizing taking place any more\r\n\r\n**On an empty cache**\r\nhttp://screencast-o-matic.com/watch/cDn6nEhR3E\r\n\r\n### Features:\r\n* Semi-opaque row while it's being filled\r\n* Spinners on images in albums\r\n* Spinners on single images on row (with caveat, see below)\r\n\r\n### Caveats\r\n* 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\r\n* 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\r\n* On low powered devices, there may be a bit of stuttering when resizing very wide images. I find this acceptable, compared to the advantages.\r\n\r\n\r\n<bountysource-plugin>\r\n---\r\nWant to back this issue? **[Post a bounty on it!](https://www.bountysource.com/issues/8726549-show-thumbnails-as-soon-as-they-re-received?utm_campaign=plugin&utm_content=tracker%2F9328526&utm_medium=issues&utm_source=github)** We accept bounties via [Bountysource](https://www.bountysource.com/?utm_campaign=plugin&utm_content=tracker%2F9328526&utm_medium=issues&utm_source=github).\r\n</bountysource-plugin>"}}