Improve UI reaction time when using week calendar

[lukevella]

When using the week calendar during poll creation, the UI reacts quite slows to drawing a time slot. This is due to the form data being persisted to session storage which then triggers a rerender. All in all the UI rerenders multiple times whenever a time slot is added. This should be optimized so that updating session storage doesn't trigger a state update.

[code-with-jane]

I have noticed that the month view reaction time is also slow when "Specify times" option is selected and we select more than 15 dates. I investigated a bit and saw that there are many loops and groupings in MonthCalendar component which are memoized but still all of these need to re run when form options change.

Maybe we should decouple the calendar view from the time options view because when we select a day in calendar it waits until time options are rendered.

Or maybe the problem is in the headless-date-picker component as I see we are not memoizing anything there and whenever we select a date all this daysOfWeek and other stuff are re calculated. Also date picker selection is passed and stored in this headless date picker. I think this might be the main issue of re renders https://github.com/lukevella/rallly/blob/main/src/components/headless-date-picker.tsx#L36

Maybe we should move the selection state to some react context? Also maybe you don't know but there are really REALLY good calendar and date picker hooks with great internationalization support in Adobe react aria library:

• https://react-spectrum.adobe.com/react-aria/useCalendar.html
• https://react-spectrum.adobe.com/react-aria/useDatePicker.html

You should consider switching to these during refactoring as these hooks are really lightweight and performant

[lukevella]

Thanks @code-with-jane, those hooks look like they will come in really handy.

I'm planning on removing the session storage in the next release so that should make things feel a lot smoother. I think the state management around this part of the codebase is not very optimized but I do plan on revisiting it soon.

[code-with-jane]

I don't know about week calendar but locally while debugging I removed whole poll-options-form state and sessionStorage and I am digging in only the month-calendar component and there is no difference, I still see this slow time slots behavior. If I will manage to find the source of issue I will let you know.