Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[New Primitive] VirtualList #750

Open
andrevenancio opened this issue Jun 28, 2021 · 7 comments
Open

[New Primitive] VirtualList #750

andrevenancio opened this issue Jun 28, 2021 · 7 comments
Labels
Difficulty: Hard This issue is likely very difficult Type: New Primitive Request for a new primitive

Comments

@andrevenancio
Copy link

andrevenancio commented Jun 28, 2021

Feature request

Overview

Infinite scrolling has become some what of a standard on social media platforms. However the more dom elements you create as you scroll, the less performant your page will be. A commonly used technique is to re-use cells and substitute their content as the user scrolls while also increasing the paddingTop to increase the scrollbar. One can see this technique in practice in libraries like react-scrollable-list or react-window. This will be a great addition to the radix primitives family.

Examples in other libraries

react-scrollable-list
react-window

Who does this impact? Who is this for?

This component is probably targeted towards advanced users, yet if simple to implement, it should be benefitial to any user.

Additional context

This feature request was also requested on Discord

And there seems to be some public interest on it too :)

@andrevenancio andrevenancio changed the title Feed component Feed component - Feature Request Jun 29, 2021
@andrevenancio andrevenancio changed the title Feed component - Feature Request Feed primitive - Feature Request Jun 29, 2021
@colmtuite
Copy link

Thanks for this. As promised, we'll take a look asap. We're working on Select, Toast, and modality work right now, so it won't be possible for at least a couple months. But we'll consider it for the next cycle.

@andy-hook andy-hook changed the title Feed primitive - Feature Request Feature Request – Feed primitive Aug 2, 2021
@andy-hook andy-hook added the Type: Enhancement Small enhancement to existing primitive/feature label Aug 2, 2021
@jjenzz jjenzz added Type: Feature New feature for existing primitive and removed Type: Enhancement Small enhancement to existing primitive/feature labels Sep 15, 2021
@benoitgrelard benoitgrelard added Type: New Primitive Request for a new primitive Resolution: Duplicate This issue is a duplicate and removed Type: Feature New feature for existing primitive labels Apr 5, 2022
@benoitgrelard benoitgrelard changed the title Feature Request – Feed primitive [New Primitive] Virtualized list Apr 5, 2022
@benoitgrelard benoitgrelard added Difficulty: Hard This issue is likely very difficult Resolution: Backlog and removed Resolution: Duplicate This issue is a duplicate labels Apr 5, 2022
@benoitgrelard benoitgrelard changed the title [New Primitive] Virtualized list [New Primitive] VirtualList Apr 12, 2022
@grumd
Copy link

grumd commented Aug 6, 2022

I just want to mention that react-virtuoso is not too hard to set up with ScrollArea.

https://codesandbox.io/p/sandbox/wispy-field-g8w2t3?file=%2FApp.jsx

const TAGS = Array.from({ length: 500 }).map(
  (_, i, a) => `v1.2.0-beta.${a.length - i}`
);

const ScrollAreaDemo = () => {
  const [scrollParent, setScrollParent] = useState();

  return (
    <ScrollArea.Root className="ScrollAreaRoot">
      <ScrollArea.Viewport className="ScrollAreaViewport" ref={setScrollParent}>
        <Virtuoso
          data={TAGS}
          itemContent={(index, tag) => <div className="Tag">{tag}</div>}
          customScrollParent={scrollParent ?? undefined}
        />
      </ScrollArea.Viewport>
      <ScrollArea.Scrollbar
        className="ScrollAreaScrollbar"
        orientation="vertical"
      >
        <ScrollArea.Thumb className="ScrollAreaThumb" />
      </ScrollArea.Scrollbar>
    </ScrollArea.Root>
  );
};

Can be helpful for anyone who's still waiting for VirtualList and couldn't make other virtualization libraries work.

@marcoripa96
Copy link

Is the sandbox still available? I would like to take a look but the link isn't working

@grumd
Copy link

grumd commented Feb 10, 2023

@marcoripa96 Sorry, accidentally deleted the old sandbox. I just added a new one and posted the code in the comment as well.

@inokawa
Copy link

inokawa commented Sep 8, 2023

Hi, I'm author of https://github.com/inokawa/virtua .

It's lightweight (about 3x lighter than react-virtuoso) and made with easy virtualization in mind. I hope it may help someone wants headless virtualization.

https://inokawa.github.io/virtua/?path=/story/advanced-with-radix-ui--default
https://github.com/inokawa/virtua/blob/main/stories/advanced/With%20radix-ui.stories.tsx

@anteqkois
Copy link

Hi, I'm author of https://github.com/inokawa/virtua .

It's lightweight (about 3x lighter than react-virtuoso) and made with easy virtualization in mind. I hope it may help someone wants headless virtualization.

https://inokawa.github.io/virtua/?path=/story/advanced-with-radix-ui--default https://github.com/inokawa/virtua/blob/main/stories/advanced/With%20radix-ui.stories.tsx

You saved me life 🫶

@davidsonsns
Copy link

great lib @inokawa! appreciate the effort you made

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Difficulty: Hard This issue is likely very difficult Type: New Primitive Request for a new primitive
Projects
None yet
Development

No branches or pull requests

10 participants