feat(ScrollArea): new component

[mikenewbon]

🔗 Linked issue

Resolves #5201

❓ Type of change

• [ ] 📖 Documentation (updates to the documentation or readme)
• [ ] 🐞 Bug fix (a non-breaking change that fixes an issue)
• [ ] 👌 Enhancement (improving an existing functionality)
• [x] ✨ New feature (a non-breaking change that adds functionality)
• [ ] 🧹 Chore (updates to the build process or auxiliary tools and libraries)
• [ ] ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

An implementation of a flexible, multi-column, vertical/horizontal scroll-area component using Tanstack virtual.

📝 Checklist

• [x] I have linked an issue or discussion.
• [x] I have updated the documentation accordingly.

[mikenewbon]

@benjamincanac Got an initial version working, and managed to implement a working gap for multiple lanes. Would like to figure out a nice input of min/max lanes with target size to be responsive. Still lots to do but a cool demo!

[mikenewbon]

Ah sorry @benjamincanac - didnt mean for you to spend time reviewing yet, I was just excited about the demo 😅

[benjamincanac]

Yeah don't worry I just took a quick look at it 😊 The demo is really cool!

[alliecatowo]

I'd love to see skeleton support for something like this!

I was implementing a scrollable component that UTable won't really work for with tan-virtual, and had the similar scroll behavior when jumping down a large list, where everything blanks out for a second. If that behaviors unavoidable, skeletons or some other placeholder prop could really help the visual flow. Infinite scroll is definitely a component Nuxt UI could use :)

Loving the demo by the way! 💪🏻

[mikenewbon]

I'd love to see skeleton support for something like this!

I was implementing a scrollable component that UTable won't really work for with tan-virtual, and had the similar scroll behavior when jumping down a large list, where everything blanks out for a second. If that behaviors unavoidable, skeletons or some other placeholder prop could really help the visual flow. Infinite scroll is definitely a component Nuxt UI could use :)

A lot of the rendering time is taken up by the height calculation, if you have a consistent row height - using the correct estimate size improves the scrolling empty state a lot. I dont see support for a loading/skeleton state in tanstack virtual. There is a check for is scrolling, I will try to expose this and you could could show some kind of skeleton, otherwise if you're dynamically calling data on render, you would need to implement a loading state inside your row.

@alliecatowo If you find any helpful references please link them, I would love to solve this also.

[pkg-pr-new[bot]]

npm i https://pkg.pr.new/@nuxt/ui@5245

commit: a6971d1

[mikenewbon]

@benjamincanac I've gotten pretty far, and i've got it working inside the blogposts component. I could probably use feedback at this point before going further.

[mikenewbon]

@benjamincanac - Fixed a couple bugs but still waiting for some feedback on this before implementing into other modules. I added this numeric prop conversion as I was getting errors with the componentExample - maybe there is a correct way to set this to a numeric value in the docs markdown though.

[benjamincanac]

@mikenewbon I don't think we should make the changes on BlogPosts in this PR, is there no way to make this work without adding a virtualize prop everywhere? Something like this 🤔

<template>
  <UScrollArea as-child>
    <UBlogPosts />
  </UScrollArea>
</template>

[mikenewbon]

is there no way to make this work without adding a virtualize prop everywhere? Something like this 🤔

<template>
  <UScrollArea as-child>
    <UBlogPosts />
  </UScrollArea>
</template>

@benjamincanac my tests of this dont seem to be working, but maybe I misunderstand the primitive docs from reka, it says it merges props but how would we connect them with the child?

Otherwise, removed the blogPosts changes.

[mikenewbon]

@benjamincanac spent some more time digging into this! I think I might have misunderstood your original comment - you mean that's the example of implementation for the user, so they would just wrap it around existing components and merge the virtualization props with as-child?

I tested this pattern and found it doesn't work because:

• asChild merges DOM attributes/handlers, but BlogPosts still renders all items using its own v-for
• ScrollArea's virtualization logic never runs (no template slot to render into)
• Even with provide/inject, we'd need to nest ScrollArea inside BlogPosts, creating component recursion

This is consistent with how other implementations i've found of TanStack Virtual - they all use the scoped slot pattern for maximum flexibility. I've already removed virtualization from BlogPosts as you suggested. Perhaps just updating the BlogPosts documentation with an example would be enough:

<UScrollArea :items="posts" virtualize>
  <template #default="{ item }">
    <UBlogPost v-bind="item" />
  </template>
</UScrollArea>

Let me know what I can do to get this in 4.2.0!

[mikenewbon]

I removed the responsive lane calculation, resize observers and made the non-virtualized the default with theme styling rather than trying to use virtualize options. Hopefully this is a bit cleaner.

[mikenewbon]

Thanks @benjamincanac - looking great! Will take a proper look later at the playground but docs is much better.

Masonry layout section was reworked after I removed the resize observer, could probably be retitled to 'Responsive Lanes' as variable heights section covers masonry. Load more, I will make a nice example tonight and share. Does a local example just generating new items on call work or should I find an public paginated api?

[benjamincanac]

As you prefer both solutions work, there's an example on the Table that uses a public API though: https://ui.nuxt.com/docs/components/table#with-infinite-scroll

[mikenewbon]

@benjamincanac - fixed a couple of visual bugs in horizontal layout in the playground and the changes in docs discussed, let me know if you have feedback you'd like me to implement or feel free to make further changes yourself! Thanks bud 🚀

[mikenewbon]

@benjamincanac - i've added default values which should mean the virtual/nonvirtual views are consistent by default without overrides and <UScrollArea virtualize :items="items"> should just work. Is this what you mean?