From 057b43627b53b4fdd878022f4b40f4c6ebdfa1c7 Mon Sep 17 00:00:00 2001 From: Kyle Pope Date: Wed, 25 Feb 2026 23:13:40 +0800 Subject: [PATCH] Smooth calendar resize during panel transitions Replace single delayed updateSize() with requestAnimationFrame loop that continuously resizes FullCalendar throughout the 300ms CSS transition, eliminating the visual desync between panel and calendar. Co-Authored-By: Claude Opus 4.6 --- frontend/src/components/calendar/CalendarPage.tsx | 15 +++++++++++---- 1 file changed, 11 insertions(+), 4 deletions(-) diff --git a/frontend/src/components/calendar/CalendarPage.tsx b/frontend/src/components/calendar/CalendarPage.tsx index 6331466..7fca355 100644 --- a/frontend/src/components/calendar/CalendarPage.tsx +++ b/frontend/src/components/calendar/CalendarPage.tsx @@ -90,12 +90,19 @@ export default function CalendarPage() { const panelOpen = panelMode !== 'closed'; - // Resize calendar when panel opens/closes (CSS transition won't trigger ResizeObserver on inner div) + // Continuously resize calendar during panel open/close CSS transition useEffect(() => { - const timeout = setTimeout(() => { + let rafId: number; + const start = performance.now(); + const duration = 350; // slightly longer than the 300ms CSS transition + const tick = () => { calendarRef.current?.getApi().updateSize(); - }, 320); - return () => clearTimeout(timeout); + if (performance.now() - start < duration) { + rafId = requestAnimationFrame(tick); + } + }; + rafId = requestAnimationFrame(tick); + return () => cancelAnimationFrame(rafId); }, [panelOpen]); // Scroll wheel navigation in month view