pleroma/pleroma-fe
Watch
2
2
Fork
You've already forked pleroma-fe
 10
Code Issues 351 Pull requests 26 Projects Releases 5 Packages 1 Wiki Activity

Support Lazy Loading #2099

Closed
tae wants to merge 12 commits from gitlab-mr-iid-830 into develop
pull from: gitlab-mr-iid-830
merge into: pleroma:develop
Conversation 14 Commits 12 Files changed 15 +66 -34
tae commented 2019-06-13 16:47:06 +00:00
Member
Copy link
  • before (41 images loaded)

before

  • after (12 images loaded)

after

- before (41 images loaded) ![before](/attachments/dcaa78eb-3758-4670-9d6a-f3e16275d35b) - after (12 images loaded) ![after](/attachments/d7112e60-8ac1-4443-8ae5-bb8f51ee3cda)
after.png
1.3 MiB
before.png
1.4 MiB
feld commented 2019-06-13 16:52:51 +00:00
Owner
Copy link

My testing of this on bikeshed results in much better bandwidth usage on mobile, especially when jumping between timelines and profiles, etc.

My testing of this on bikeshed results in much better bandwidth usage on mobile, especially when jumping between timelines and profiles, etc.
hj commented 2019-06-13 22:02:20 +00:00
Member
Copy link

is it possible to use @lazyLoaded="handleImageLoaded" attribute instead of manually adding/removing listeners?

is it possible to use `@lazyLoaded="handleImageLoaded"` attribute instead of manually adding/removing listeners?
tae commented 2019-06-14 16:31:11 +00:00
Author
Member
Copy link

I've refactored it using a built-in feature of the library. It was difficult to find it since it is not documented.

I've refactored it using a built-in feature of the library. It was difficult to find it since it is not documented.
tae commented 2019-06-23 02:28:26 +00:00
Author
Member
Copy link

@hj bump

@hj bump
hj commented 2019-06-23 19:53:35 +00:00
Member
Copy link

I'll check it out tomorrow.

I'll check it out tomorrow.
hj commented 2019-06-24 20:18:02 +00:00
Member
Copy link
  • images load very weird, even if it's just same image that's already been loaded (i.e. user avatars) there's still weird delay before it's shown
  • precached nsfw images also have this additional delay
  • weird delay when opening up lightbox
  • doesn't always work with play-on-hover GIFs:
    image
* images load very weird, even if it's just same image that's already been loaded (i.e. user avatars) there's still weird delay before it's shown * precached nsfw images also have this additional delay * weird delay when opening up lightbox * doesn't _always_ work with play-on-hover GIFs: ![image](/attachments/6b511053-cea9-4df7-909c-c1b7a20fe648)
image.png
66 KiB
hj commented 2019-06-24 20:25:19 +00:00
Member
Copy link

overall it makes whole UI feel MUCH more janky while not giving too much of a benefit except for bandwidth savings which is questionable and if you really care about it, you can hide attachments in settings.

I say if you really want it:

  • make it work ONLY on attachments in timeline - not viewbox, not user avatars, ONLY attachments.
  • fix play-on-hover gifs
  • make it configurable in options with instance default
overall it makes whole UI feel MUCH more janky while not giving too much of a benefit except for bandwidth savings which is questionable and if you really care about it, you can hide attachments in settings. I say if you ***really*** want it: * make it work ONLY on attachments in timeline - not viewbox, not user avatars, ONLY attachments. * fix play-on-hover gifs * make it configurable in options with instance default
feld commented 2019-07-16 20:17:24 +00:00
Owner
Copy link
  • images load very weird, even if it's just same image that's already been loaded (i.e. user avatars) there's still weird delay before it's shown

I can't reproduce this on Social. What kind of latency do you have between your client and server?

  • precached nsfw images also have this additional delay

I also can't reproduce this on Social

  • weird delay when opening up lightbox

If the image hasn't been downloaded yet, there is a delay... but that shouldn't happen for you because the image in the timeline is the same in the lightbox. On Social we have two images -- low res for timeline; high res for lightbox -- so there is a delay, but it's less than what I see on most servers and not as bad as I've seen on Mastodon.social

  • doesn't always work with play-on-hover GIFs:

Will have to investigate. We don't have GIFs on Social. All GIFs are converted to looping MP4 videos.

> * images load very weird, even if it's just same image that's already been loaded (i.e. user avatars) there's still weird delay before it's shown I can't reproduce this on Social. What kind of latency do you have between your client and server? > * precached nsfw images also have this additional delay I also can't reproduce this on Social > * weird delay when opening up lightbox If the image hasn't been downloaded yet, there is a delay... but that shouldn't happen for you because the image in the timeline is the same in the lightbox. On Social we have two images -- low res for timeline; high res for lightbox -- so there is a delay, but it's less than what I see on most servers and not as bad as I've seen on Mastodon.social > * doesn't *always* work with play-on-hover GIFs: Will have to investigate. We don't have GIFs on Social. All GIFs are converted to looping MP4 videos.
hj commented 2019-07-16 20:39:04 +00:00
Member
Copy link

I can't reproduce this on Social. What kind of latency do you have between your client and server?

on develop images load nearly instantly, on this branch they take their time loading because they don't start loading IMMEDIATELY when browser knows about them.

but that shouldn't happen for you because the image in the timeline is the same in the lightbox.

yet it somehow happens, but i'm not entirely sure, might be unrelated.

Will have to investigate. We don't have GIFs on Social. All GIFs are converted to looping MP4 videos.

how disgusting, would you kindly stop?

>I can't reproduce this on Social. What kind of latency do you have between your client and server? on develop images load nearly instantly, on this branch they take their time loading because they don't start loading IMMEDIATELY when browser knows about them. >but that shouldn't happen for you because the image in the timeline is the same in the lightbox. yet it somehow happens, but i'm not entirely sure, might be unrelated. >Will have to investigate. We don't have GIFs on Social. All GIFs are converted to looping MP4 videos. how disgusting, would you kindly stop?
feld commented 2019-07-16 20:42:51 +00:00
Owner
Copy link

how disgusting, would you kindly stop?

no, we like our users' battery and bandwidth to be preserved 😆

> how disgusting, would you kindly stop? no, we like our users' battery and bandwidth to be preserved :laughing:
hj commented 2019-07-16 20:52:10 +00:00
Member
Copy link

play-on-hover is a thing you know. i did that specifically for that purpose

play-on-hover is a thing you know. i did that specifically for that purpose
feld commented 2019-07-17 17:52:29 +00:00
Owner
Copy link

Wouldn't that only save CPU? Play-on-hover would still require the file to be downloaded to show the first frame. Perhaps I'm misunderstanding what you mean.

But also you can't "hover" on mobile 😓

Wouldn't that only save CPU? Play-on-hover would still require the file to be downloaded to show the first frame. Perhaps I'm misunderstanding what you mean. But also you can't "hover" on mobile 😓
hj commented 2019-07-17 17:58:52 +00:00
Member
Copy link

on mobile you click. for most gifs it doesn't make much differnce since you'll most likely will be seeing the whole thing anyway. it saves cpu a bit. video conversion however disallows you to upload the original gif (which is much more useful especially for image manipulation) (except if you zip it to overcome the limitation (which isn't always an option on mobile)), degrades quality, breaks seamless loops and destroys transparency.

on mobile you click. for most gifs it doesn't make much differnce since you'll most likely will be seeing the whole thing anyway. it saves cpu a bit. video conversion however disallows you to upload the original gif (which is much more useful especially for image manipulation) (except if you zip it to overcome the limitation (which isn't always an option on mobile)), degrades quality, breaks seamless loops and destroys transparency.
tae commented 2019-07-22 19:39:28 +00:00
Author
Member
Copy link

fixed @hj

fixed @hj

Pull request closed

Please reopen this pull request to perform a merge.
Sign in to join this conversation.
Reviewers
No reviewers
Labels
Clear labels   
BE Request

   
Backlog

   
Better behavior

   
Blocked by deps

   
Bug

   
Code Review

   
Discussion

   
Doing

   
Feature Request / Enhancement

   
In the shining bright future maybe

   
It's complicated

   
MS Edge

   
Mememoon (or other niche browsers)

   
Missing API

   
Missing feature

   
Missing l10n/i18n

   
NL1
Instance Admin Dashboard

  
NL2
Improved Mobile Experience

  
NL4
Improved instance customization and QoL options

  
Need to verify on develop

   
RELEASE BLOCKER

   
Reassign or Close

   
Refactor

   
Regression

   
Safari

   
To Do

   
User story

   
Waiting on godot

   
accessibility
https://git.pleroma.social/pleroma/pleroma-fe/-/snippets/7746

  
better documentation

   
chore

   
confirmed

   
easy ticket

   
incident
Denotes a disruption to IT services and the associated issues require immediate attention

  
l10n update

   
mastoapi

   
mobile

   
needs design

   
needs-info

   
needs-review

   
stupid
No labels
BE Request
Backlog
Better behavior
Blocked by deps
Bug
Code Review
Discussion
Doing
Feature Request / Enhancement
In the shining bright future maybe
It's complicated
MS Edge
Mememoon (or other niche browsers)
Missing API
Missing feature
Missing l10n/i18n
NL1
NL2
NL4
Need to verify on develop
RELEASE BLOCKER
Reassign or Close
Refactor
Regression
Safari
To Do
User story
Waiting on godot
accessibility
better documentation
chore
confirmed
easy ticket
incident
l10n update
mastoapi
mobile
needs design
needs-info
needs-review
stupid
Milestone
Clear milestone
No items
No milestone
Projects
Clear projects
No items
No project
Assignees
Clear assignees
No assignees
3 participants
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set

Reference
pleroma/pleroma-fe!2099
No description provided.