Draw image placeholder on image load failure #25

New issue

Open

opened 2020-10-27 08:39:05 +00:00 by koloml · 1 comment

koloml commented

2020-10-27 08:39:05 +00:00

Currently my home instance of Matrix not showing some of the user avatars/room icons.

This happening because my home instance throws 404/500 error responses on this images load.

Maybe it will be better to catch this images load failures and draw default placeholder.

Currently my home instance of Matrix not showing some of the user avatars/room icons. ![Room Example](/attachments/af320e47-86da-4510-98eb-83a7964bdd29) ![User Avatars Example](/attachments/da22a0f1-aef9-4d99-849f-337e4471f78e) This happening because my home instance throws 404/500 error responses on this images load. ![Failed Requests](/attachments/c64422c3-e682-4120-b314-8ce845aa3d9d) Maybe it will be better to catch this images load failures and draw default placeholder.

image.png

47 KiB

image.png

27 KiB

image.png

3.3 KiB

jboi commented

2020-10-27 12:24:53 +00:00

Collaborator

Maybe 2 placeholders for 2 different scenarios:

A "loading" placeholder if the image is loading from the network, but not yet cancelled/done/rejected
An "error" placeholder if the image failed to load, while this would still be a bit annoying, it at least gives some feedback as to what's going on, instead of leaving the image loading process mysterious and "out of control" for the user, somewhat. (UX thingie)

I saw nheko use a spinner inside the image for the first one, maybe that's interesting to use.

Maybe 2 placeholders for 2 different scenarios: - A "loading" placeholder if the image is loading from the network, but not yet cancelled/done/rejected - An "error" placeholder if the image failed to load, while this would still be a bit annoying, it at least gives some feedback as to what's going on, instead of leaving the image loading process mysterious and "out of control" for the user, somewhat. (UX thingie) I saw nheko use a spinner inside the image for the first one, maybe that's interesting to use.

👍 1