• 1 Post
  • 26 Comments
Joined 7 months ago
cake
Cake day: October 6th, 2024

help-circle






  • 100% guessing here, but native apps sometimes use recycling virtualized lists. That means as you scroll the list will reuse the container that renders the post title and image. Often the image is still being fetched but you already know the title. So as you scroll, it reuses a post you previously saw, instantly swaps in the new title, but the new image is still loading, so an image from a previously post in the list is displayed.

    the result is you many only need to render and reuse 10 posts in the list, even if the list contains hundreds of posts.

    Idk if that made any sense at all, but keep an eye out if the title is new but the image was previously seen.



  • moseschrute@lemmy.worldtoPhoton@lemdro.idFeed bug
    link
    fedilink
    English
    arrow-up
    4
    ·
    26 days ago

    I don’t use Photon, but I glanced at the source code and it looks like they are also using Tanstack Virtual, which my Lemmy client uses. My app is in beta an doesn’t have many users, but I think I solved this feed issue.

    You need to do a few things:

    1. On scroll, save the first item being rendered in the virtual list + the offset of that item from the top (offset can be negative or positive)
    2. Pause the virtualization when the list is no longer visible (use IntersectionObserver)
    3. When the user returns to the list, reenable virtualization while simultaneously recalculating initalOffset to be passed to the virtual list.

    You have to recalculate initalOffset when returning to the list, NOT when you are scrolling through the list. If you try to calculate it while scrolling the feed, you will drift a few posts upwards/downwards. Using initial item + offset yields a much more stable result.

    It’s all pretty messy, but take a look at my spaghetti code.