Lazy loading images in recipe list #413

seyfeb · 2020-11-24T19:22:13Z

This PR provides lazy loading of the images as discussed in #409 (currently only in the AppIndex) and also introduces a higher-resolved thumbnail as discussed in #406 (to be discussed).

The thumbnails are only loaded when they enter the viewport using the Intersection Observer API. The images are rendered/loaded in the following way

a loading spinner is shown, while a small preview image (~1KB) is loaded from the server
once this was loaded, the loading indicator is hidden and a blurry version of the image is displayed, while the full image is loaded in the background
once the full image is loaded, the blurry version is replaced by the final image

This proposal needs to be tested and checked.

Closes #409

CC: @sam-19

codecov · 2020-11-24T19:25:47Z

Codecov Report

Merging #413 (d43032b) into master (2528767) will decrease coverage by 0.02%.
The diff coverage is 0.00%.

@@             Coverage Diff             @@
##             master    #413      +/-   ##
===========================================
- Coverage      0.95%   0.92%   -0.03%     
- Complexity      401     410       +9     
===========================================
  Files            13      13              
  Lines          1262    1301      +39     
===========================================
  Hits             12      12              
- Misses         1250    1289      +39

Flag	Coverage Δ	Complexity Δ
integration	`0.00% <0.00%> (ø)`	`0.00 <0.00> (ø)`
unittests	`0.92% <0.00%> (-0.03%)`	`0.00 <0.00> (ø)`

Flags with carried forward coverage won't be shown. Click here to find out more.

Impacted Files	Coverage Δ	Complexity Δ
lib/Controller/MainController.php	`0.00% <0.00%> (ø)`	`32.00 <0.00> (ø)`
lib/Controller/RecipeController.php	`0.00% <0.00%> (ø)`	`14.00 <0.00> (ø)`
lib/Service/RecipeService.php	`0.00% <0.00%> (ø)`	`233.00 <0.00> (+9.00)`

christianlupus

Looks good in general. I have not yet tested it but I assume it is working.

christianlupus · 2020-11-26T08:13:31Z

lib/Service/RecipeService.php

@@ -748,7 +752,7 @@ public function addRecipe($json) {
 			$thumb_image = new Image();
 			$thumb_image->loadFromData($full_image_data);
 			$thumb_image->fixOrientation();
-			$thumb_image->resize(128);
+			$thumb_image->resize(256);


This will default the thumb image size to 256x256. We should make sure, this is no problem as the old files are still 128x128.

I would like to put this out for discussion. Actually this change doesn’t make too much sense, since currently the images are shown in the lists in 105px by 105px - so 128 is more sensible in the sense that is less data to be transfered. However, there seems to be the need for larger thumbnails (#406). We could also keep the 128px thumbnail thumb.jpg and create a 256x256 version as thumb@2x.jpg

I do not consider this too much of a problem to use 256x256. It is only a few kB per recipe.

seyfeb · 2020-11-26T12:14:20Z

Looks good in general. I have not yet tested it but I assume it is working.

Before this gets merged, I’d prefer to have someone test it :)

christianlupus · 2020-12-06T17:11:59Z

I just checked with an existing (dev) version. I found one issue yet open: The pre-existing images are not rerendered for the thumb16. So while the main images are loading, all recipes that were imported before the merge are showing a fork and knife in blurred version.

I would consider this OK for now as it should not cause trouble as it is shown only a very limited amount of time. We should however prepare a migration step in #340 to make everything consistent.

As this can be tackled later easily, I suggest merging. @sam-19 please give your opinion. If something breaks, we can reverse that later without issues.

seyfeb · 2020-12-07T00:07:24Z

@christianlupus I added a check if thumb16 is present and recreate the thumbnails if this is not the case.

seyfeb · 2020-12-07T10:23:58Z

I also added the lazy-loading to the search results and category pages.

sam-19 · 2020-12-12T09:36:55Z

I'm not familiar with the Lozad library, but the general idea seems good to me. I just wonder if the recipe links (in index and search results) should have been converted into a component of its own. This could possibly save some trouble and iteration, especially if recipe lists are are used in more places in the future. Then again, every new component increases complexity a bit, so it's probably not worth it yet. There is one import line ending in a semi-colon in LazyPicture.vue, though :)

seyfeb · 2020-12-12T14:26:03Z

I just wonder if the recipe links (in index and search results) should have been converted into a component of its own.

Do you mean the complete tiles? I.e., Image plus title? I also thought about this and I guess that is a good idea. Especially if we want to change the layout at some point (e.g. square tiles with the image filling the tile and the title as an overlay) or even simply adding more information (category, number of stars, sharing status, cookbook name (if there are multiple at some point), etc.) to it.

However, I don’t think this is the right PR to do this.

There is one import line ending in a semi-colon in LazyPicture.vue, though :)

I’ll remove this!

Added lozad lazy loading module Signed-off-by: Sebastian Fey <info@sebastianfey.de>

…x128 thumbnail for recipes Signed-off-by: Sebastian Fey <info@sebastianfey.de>

Signed-off-by: Sebastian Fey <info@sebastianfey.de>

Signed-off-by: Sebastian Fey <info@sebastianfey.de> Signed-off-by: Christian Wolf <github@christianwolf.email>

Signed-off-by: Sebastian Fey <info@sebastianfey.de>

Lazy loading images in recipe list

christianlupus · 2020-12-21T10:29:44Z

I was too quick with the merging, unfortunately. I had to revert and emerge to get the checks done right. Correct merge commit is 66f8023.

seyfeb force-pushed the feature/lazyloading branch from fd77f29 to f7e20fc Compare November 25, 2020 09:54

christianlupus reviewed Nov 26, 2020

View reviewed changes

christianlupus requested a review from sam-19 November 26, 2020 08:17

seyfeb mentioned this pull request Dec 6, 2020

Bigger Thumbnails #406

Open

christianlupus force-pushed the feature/lazyloading branch from f7e20fc to 1d5ac91 Compare December 6, 2020 17:08

seyfeb force-pushed the feature/lazyloading branch 2 times, most recently from 4b0a841 to 38b58fb Compare December 7, 2020 00:00

seyfeb force-pushed the feature/lazyloading branch 2 times, most recently from 61b8f8c to 4a7a78b Compare December 7, 2020 10:04

seyfeb added 5 commits December 21, 2020 10:27

Added picture vue-component for lazy loading

fcbf4fd

Added lozad lazy loading module Signed-off-by: Sebastian Fey <info@sebastianfey.de>

Creating 256x256 thumbnail and 16x16 preview thumbnail instead of 128…

ff7243f

…x128 thumbnail for recipes Signed-off-by: Sebastian Fey <info@sebastianfey.de>

Replaced default img by lazy-loading component in AppIndex

b2a5699

Signed-off-by: Sebastian Fey <info@sebastianfey.de>

Updated CHANGELOG

c88377b

Signed-off-by: Sebastian Fey <info@sebastianfey.de>

Creating small thumbnail preview on request if it doesnt already exist

fb28a57

Signed-off-by: Sebastian Fey <info@sebastianfey.de>

christianlupus force-pushed the feature/lazyloading branch from 15668c2 to e538271 Compare December 21, 2020 09:35

christianlupus and others added 3 commits December 21, 2020 10:36

Added lazy-loading images also to search results

943869e

Signed-off-by: Sebastian Fey <info@sebastianfey.de> Signed-off-by: Christian Wolf <github@christianwolf.email>

Added lazy-loading images also to categories and tags

e4c2cd4

Signed-off-by: Sebastian Fey <info@sebastianfey.de>

Code cleanup

c538274

Signed-off-by: Sebastian Fey <info@sebastianfey.de>

christianlupus force-pushed the feature/lazyloading branch from e538271 to c538274 Compare December 21, 2020 09:37

christianlupus merged commit 158320a into nextcloud:master Dec 21, 2020

christianlupus added a commit that referenced this pull request Dec 21, 2020

Merge pull request #413 from seyfeb/feature/lazyloading

66f8023

Lazy loading images in recipe list

Teifun2 mentioned this pull request Dec 26, 2020

Blurred thumbnails on larger screens Teifun2/nextcloud-cookbook-flutter#28

Closed

seyfeb deleted the feature/lazyloading branch December 30, 2020 12:19

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Lazy loading images in recipe list #413

Lazy loading images in recipe list #413

seyfeb commented Nov 24, 2020

codecov bot commented Nov 24, 2020 •

edited

Loading

christianlupus left a comment

christianlupus Nov 26, 2020

seyfeb Nov 26, 2020

christianlupus Nov 26, 2020

seyfeb commented Nov 26, 2020

christianlupus commented Dec 6, 2020 •

edited

Loading

seyfeb commented Dec 7, 2020

seyfeb commented Dec 7, 2020 •

edited

Loading

sam-19 commented Dec 12, 2020

seyfeb commented Dec 12, 2020

christianlupus commented Dec 21, 2020

Lazy loading images in recipe list #413

Lazy loading images in recipe list #413

Conversation

seyfeb commented Nov 24, 2020

codecov bot commented Nov 24, 2020 • edited Loading

Codecov Report

christianlupus left a comment

Choose a reason for hiding this comment

christianlupus Nov 26, 2020

Choose a reason for hiding this comment

seyfeb Nov 26, 2020

Choose a reason for hiding this comment

christianlupus Nov 26, 2020

Choose a reason for hiding this comment

seyfeb commented Nov 26, 2020

christianlupus commented Dec 6, 2020 • edited Loading

seyfeb commented Dec 7, 2020

seyfeb commented Dec 7, 2020 • edited Loading

sam-19 commented Dec 12, 2020

seyfeb commented Dec 12, 2020

christianlupus commented Dec 21, 2020

codecov bot commented Nov 24, 2020 •

edited

Loading

christianlupus commented Dec 6, 2020 •

edited

Loading

seyfeb commented Dec 7, 2020 •

edited

Loading