White boxes during thumbnail rendering

[wkloucek]

Steps to reproduce

1. run oCIS 1.8.0-RC1
2. create a folder with a bunch of pictures
3. navigate to that folder

Expected behaviour

Thumbnail placeholder is replaced by the actual thumbnail when available

Actual behaviour

Thumbnail placeholder is replaced by white box and later replaced by the actual thumbnail.

Peek.2021-06-28.15-38.mp4

Server configuration

oCIS: 1.8.0-RC1 -> ownCloud Web: 3.3.0

Client configuration

Browser: Chromium Version 91.0.4472.114

[wkloucek]

@fschade looks like some browser behave differently :-/

[fschade]

@wkloucek thanks, good catch. I take care

[wkloucek]

Still persists in Web 4.1.0

[kulmann]

Still persists in web 4.5.0 and upcoming 4.6.0

[dschmidt]

AFAICT this is an issue (at least) in Chrome with blob: urls.

With the current implementation in

web/packages/web-app-files/src/helpers/resource/privatePreviewBlob.ts

Line 42 in aabf395

return window.URL.createObjectURL(data)

loading a file list with thumbnails looks like this for me (Chromium 95):

liveview-2021-12-11_16.32.53.mp4

Replacing the blob url with a data url, using blobToDataUrl from https://stackoverflow.com/a/67551175/2886832

    return blobToDataURL(data)

The flickering is gone for me:

liveview-2021-12-11_16.33.47.mp4

Obviously that is pushing way more data through the store, so I'm not sure this is a desirable solution.

What do you think: how should we progress from here?

[dschmidt]

Possibly related: #5119 #5796

[lookacat]

LGTM 👍🏼 would close the issue if there is nothing left

[kulmann]

LGTM 👍🏼 would close the issue if there is nothing left

🤔 the issue is not solved at all. can't close it. @dschmidt I'd not like to push more data into the store. Prio is not that high though, so let's put some more thought into it when we cleaned up the store further.

[wkloucek]

I tested with Web 5.7.0-rc.5 and it looks way better than with 3.3.0. (Although it does not feel too snappy)

Peek.2022-07-18.07-46.mp4

[wkloucek]

I couldn't reproduce with Web 7.0.1 and oCIS 3.1.0-next.1