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)
• ✨ 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

• I have linked an issue or discussion.
• 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!

[benjamincanac]

Not sure defining a default slot multiple times works here 🤔

[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]

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.

[benjamincanac]

@mikenewbon I've pushed a few changes to clean things up a bit, hopefully I didn't mess anything. Would you mind having a look and letting me know what you think?

Is there a reason the Infinite scroll and Masonry layout sections in the docs don't have examples? 🤔

[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 🚀

[benjamincanac]

@mikenewbon I'm hesitant to merge this because it confuses me to have to define padding and gap using the virtualize object, it should work out of the box like virtualize props on other components 🤔

[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?