React Aria Calendar flashes previous month when initialised

[thomasmoon]

Provide a general summary of the issue here

Hi,

I ran into an interesting bug when running Playwright tests on the calendar picker.

It calendar first loads with the last month visible and then flashes to the current month.

Happens so quickly that it's hard to catch, but it can be seen from your documentation page even:

https://react-aria.adobe.com/Calendar

React_Aria_Calendar_last_month_flashing.mp4

🤔 Expected Behavior?

It should just show the current month with no flashing.

😯 Current Behavior

Last month flashes quickly.

💁 Possible Solution

Need to check the initialization routines. Maybe the previous calendar is always included for fast switching but it should be hidden better and in my case old dates are disabled, so really wasn't expecting to see it.

🔦 Context

I encountered this in Playwright tests but after consulting the documentation, I can see that it's a general issue.

🖥️ Steps to Reproduce

1. Go to the documentation page.
2. Observe the flashing calendar view from the last month.

Version

react aria components 1.13.0

What browsers are you seeing the problem on?

Chrome

If other, please specify.

All browsers

What operating system are you using?

Mac OS

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

[devongovett]

I think this is due to React's SSR hydration. The docs page is rendered to a static HTML file, and was last deployed in December. On the client, it re-renders with the current month after hydration. I'm not aware of any way around this other than to hard code the selected date in the example so it never changes or re-deploy every day.

[snowystinger]

Outside of our docs, you could avoid it by not rendering the calendar immediately. You could just delay it by a useLayoutEffect, that way it also won't flash as empty.
If we do that, it'll appear as code in the example, and I don't think that we want to force that into the component either.

[thomasmoon]

Hi guys, informative insights, thanks!

I can see how this wouldn't be a huge problem for people, but every little glitch and flash indicates to me potential room for improvements.

My main problem was that the calendar header was not showing correctly when initializing in Playwright e2e tests and then also didn't update when navigating the calendar views with clicks in Playwright's Chromium. I was able to test for other assertions and ignore the header.

Is this problem also related to hydration? Do you run Playwright tests on these components? Would it be useful to introduce these to the project with best practices for example?

[snowystinger]

Thanks for the follow up.

The headers not changing doesn't sound like expected behaviour nor does it sound related to hydration. Can you provide a reproduction outside of Playwright?

We are working on some in browser tests, beyond chromatic's VRT, here #9516

The SSR hydration stuff isn't related to playwright, so just introducing playwright wouldn't surface those. At some point hopefully we can introduce some tests which render SSR in a real browser as well, then it would.

It's unfortunately unrealistic for us to have tests with every possible runner, but we are aiming to expand a little at least and playwright is one of the one's we've been considering.