[pickers] Slowness in selecting a date in the `DesktopDateRangePicker` component when the number of calendars is high about mui-x HOT 5 OPEN

To help us diagnose the issue efficiently, could you provide a stripped-down reproduction test case using the latest version? A live example would be fantastic! ✨

For your convenience, our documentation offers templates and guides on creating targeted examples: Support - Bug reproduction

Just a friendly reminder: clean, functional code with minimal dependencies is most helpful. Complex code can make it tougher to pinpoint the exact issue. Sometimes, simply going through the process of creating a minimal reproduction can even clarify the problem itself!

Thanks for your understanding! 🙇🏼

from mui-x.

You can see the live example here (make sure to access it with a mobile device):
https://react-bxwynh.stackblitz.io/

When the number of calendars is high, there is a noticeable slowdown, but when I reduce the number, the speed improves.
Before purchasing the license, I checked if I could customize this component to display the months vertically and scroll through them. Based on this, I decided to buy the license. However, after completing the customization, I encountered significant slowness.

from mui-x.

@srbadni It looks like "Expedia" uses your mentioned layout/design only on the mobile version of the webpage.
Have you considered using MobileDateRangePicker for this as it technically better resembles the bahavior? 🤔
Another option could be to rebuild the input/interaction part using your desired entry/input and any modal/dialog solution you want to render DateRangeCalendar.
Here is an experiment I've done with MobileDateRangePicker: https://stackblitz.com/edit/react-bxwynh-xyjqdz?file=Demo.tsx
Does it help you alleviate the performance problems as compared to the desktop variant?

from mui-x.

@LukasTy I ran your example. In fact, in your example, the MobileDateRangePicker component is uncontrolled, which, as I tested in my Mobile device, makes the speed somewhat higher. But when I make it controlled, the processing and selection speed decreases again:

https://react-bxwynh-31wtta.stackblitz.io/

In Expedia, as soon as you click on a day, that day gets selected immediately. Overall, I didn't see much difference between your approach and the one I was originally implementing.

from mui-x.

@srbadni thank you for confirming your discoveries. 👍
I'm adding this issue to the board to discuss possible approaches within the team.
The DateRangeCalendar was not designed to work with so many calendars, but surfacing this problem could help us improve the performance of the DateRangeCalendar overall. 👌

from mui-x.