rohskiddo/UMBRA
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Smooth calendar resize during panel transitions

Browse Source 
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 <noreply@anthropic.com>
This commit is contained in:
Kyle 2026-02-25 23:13:40 +08:00
parent 8945295e2a
commit 057b43627b
1 changed files with 11 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
frontend/src/components/calendar/CalendarPage.tsx
View File

@ -90,12 +90,19 @@ export default function CalendarPage() {
const panelOpen = panelMode !== 'closed'; 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(() => { 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(); calendarRef.current?.getApi().updateSize();
}, 320); if (performance.now() - start < duration) {
return () => clearTimeout(timeout); rafId = requestAnimationFrame(tick);
}
};
rafId = requestAnimationFrame(tick);
return () => cancelAnimationFrame(rafId);
}, [panelOpen]); }, [panelOpen]);
// Scroll wheel navigation in month view // Scroll wheel navigation in month view