[pickers] Slowness in selecting a date in the `DesktopDateRangePicker` component when the number of calendars is high

[srbadni]

The problem in depth

I was looking to customize your date picker to resemble a date picker like the one on Expedia's site, where the months are displayed below the days in a column format:

- expedia

I wanted to achieve this using the DesktopDateRangePicker component, by setting the popper style to be responsive like a full-screen modal and setting the calendars value to 12. I also applied Flex-direction: column to the div tag that contains all the months so they are displayed below each other:

- my custom datepicker

The problem is that setting the calendars value to 12 has made the date selection process very slow. I've made good progress so far, but this issue has become a challenge for me at this stage.

Also, when I used React profiler, I got this report:

If this issue is caused by heavy animations, I am looking for a way to simplify this process.

Your environment

`npx @mui/envinfo`

  System:
    OS: Windows 11 10.0.22631
  Binaries:
    Node: 20.9.0 - C:\Program Files\nodejs\node.EXE
    npm: 10.1.0 - C:\Program Files\nodejs\npm.CMD
    pnpm: Not Found
  Browsers:
    Chrome: Not Found
    Edge: Chromium (126.0.2592.56)
  npmPackages:
    @emotion/react: 11.11.4 => 11.11.4
    @emotion/styled: 11.11.0 => 11.11.0
    @mui/base:  5.0.0-beta.38
    @mui/core-downloads-tracker:  5.15.19
    @mui/icons-material: 5.15.12 => 5.15.12
    @mui/lab: 5.0.0-alpha.167 => 5.0.0-alpha.167
    @mui/material: 5.15.12 => 5.15.12
    @mui/private-theming:  5.15.14
    @mui/styled-engine:  5.15.14
    @mui/styles: 5.15.12 => 5.15.12
    @mui/system:  5.15.15
    @mui/types:  7.2.14
    @mui/utils:  5.15.14
    @mui/x-date-pickers: 7.6.2 => 7.6.2
    @mui/x-date-pickers-pro: 7.6.2 => 7.6.2
    @mui/x-license:  7.6.1
    @mui/x-license-pro: 5.17.12 => 5.17.12
    @types/react: 18.2.64 => 18.2.64
    react: 18.2.0 => 18.2.0
    react-dom: 18.2.0 => 18.2.0
    typescript: 5.2.2 => 5.2.2

Search keywords: DesktopDateRangePicker, calendars, performance, delay
Order ID: 92251

[michelengelen]

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! 🙇🏼

[srbadni]

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.

[LukasTy]

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