[material-ui][docs] Virtualize the icons list search

[sai6855]

Preview: https://deploy-preview-41644--material-ui.netlify.app/material-ui/material-icons/

lighthouse report

Before:

After:

• I have followed (at least) the PR section of the contributing guide.

[mui-bot]

Netlify deploy preview

https://deploy-preview-41644--material-ui.netlify.app/

Bundle size report

No bundle size changes (Toolpad)
No bundle size changes

Generated by 🚫 dangerJS against 13c5cc5

[Janpot]

To note: We already have react-window and react-virtuoso in our dependencies. Not sure how the core team feels about this, but does it really make sense to roll our own virtualization? (e.g. react-virtuoso already supports virtual responsive grids out of the box, I haven't vetted the lib any further)

Looking at the preview, I also feel like the UX is off. i.e. it's very annoying to scroll and try and reach the content underneath the icons. IMO, the icon list should have a maximum height and scroll.

[sai6855]

To note: We already have react-window and react-virtuoso in our dependencies. Not sure how the core team feels about this, but does it really make sense to roll our own virtualization?

Oh wasn't aware of these libraries being used.

Cc @mnajdova @DiegoAndai what do you think,? should I port changes to adopt to mentioned libraries

[DiegoAndai]

@sai6855 thanks for working on this!

what do you think,? should I port changes to adopt to mentioned libraries

Yes, if possible we should use the existent dependencies.

Regarding UX, I think @danilo-leal might be able to guide us into what the interaction should be.

[danilo-leal]

I also feel like the UX is off. i.e. it's very annoying to scroll and try and reach the content underneath the icons. IMO, the icon list should have a maximum height and scroll.

Just to clarify: content here being the API section links?

[Janpot]

Just to clarify: content here being the API section links?

Yep, and the footer, feedback control, next/previous page link,...

[ZeeshanTamboli]

@sai6855 I wasn’t aware of this PR. I’ve implemented virtualization using react-virtuoso in #41330 and also improved the scrolling UX. It addresses #41126 (or part of #41126?). I'll close this PR in favor of #41330. Feel free to review it.