Style thumbnail placeholders nicely #5880
Merged
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
As expected, the only changes we need to make for thumbnail support #5875 are to the styling for the placeholder before a thumbnail is ready.
Along the way we also fix a quirk which I'd very occasionally spotted before and always looked wrong, but hadn't been a priority.
Thanks to @alexmv for help testing these changes. Chat thread: https://chat.zulip.org/#narrow/stream/243-mobile-team/topic/thumbnails/near/1892137
content: Use
object-fit: scale-down
to fit images, vs.contain
This matches the behavior of Zulip web.
The meaning of this value is that the image is either scaled
according to
contain
, or not scaled at all, whichever makes itsmaller.
In other words, we still scale down all the images we were scaling
down, but we stop scaling any images up, which tended to look a bit
silly. If the user wants to see the image scaled up, they can
always tap to see it in the lightbox.
This case is about to become more common with the advent of
thumbnailing: when we get a message where the server hasn't yet
gotten to producing a thumbnail, we'll show a placeholder image.
That placeholder is a 30x30 SVG, which looks rather odder if
scaled up to 160px high.
content: Show spinner for thumbnail placeholders
This is a port of zulip/zulip#30477. That PR isn't yet merged, but
it's been deployed on chat.zulip.org and I believe the styling is
unlikely to change. (If it does get tweaked, we can always update.)
The placeholder
img
elements already come with asrc
pointingto this same
loader-black.svg
file, but on the Zulip server.So the effects of this change are:
The placeholder image is local instead of remote, which may
improve the experience a bit on a slow connection.
In dark theme, we use an appropriately contrasting white spinner,
instead of a black spinner that blends in with the background.
Fixes: #5875
More specifically that latter commit is a port of this commit:
4d12bee29 thumbnail: Show the right spinner based on dark/light mode.
but that PR branch will presumably be rebased before merge.