diff --git a/src/features/players/components/player-stats-table.tsx b/src/features/players/components/player-stats-table.tsx index 8f47063..cebcd6c 100644 --- a/src/features/players/components/player-stats-table.tsx +++ b/src/features/players/components/player-stats-table.tsx @@ -112,6 +112,12 @@ const PlayerListItem = memo(({ stat, onPlayerClick, mmr, onRegisterViewport, onU @@ -120,7 +126,7 @@ const PlayerListItem = memo(({ stat, onPlayerClick, mmr, onRegisterViewport, onU - + @@ -143,34 +149,45 @@ const PlayerStatsTable = () => { }); const viewportsRef = useRef>(new Set()); - const isScrollingRef = useRef(false); + const scrollHandlersRef = useRef void>>(new Map()); + const isSyncingRef = useRef(false); const handleRegisterViewport = useCallback((viewport: HTMLDivElement) => { viewportsRef.current.add(viewport); const handleScroll = (e: Event) => { - if (isScrollingRef.current) return; + const target = e.target as HTMLDivElement; - isScrollingRef.current = true; - const scrollLeft = (e.target as HTMLDivElement).scrollLeft; + // Prevent infinite loops + if (isSyncingRef.current) { + return; + } + isSyncingRef.current = true; + const scrollLeft = target.scrollLeft; + + // Synchronize all other viewports immediately viewportsRef.current.forEach((vp) => { - if (vp !== e.target) { + if (vp !== target) { vp.scrollLeft = scrollLeft; } }); - requestAnimationFrame(() => { - isScrollingRef.current = false; - }); + isSyncingRef.current = false; }; - viewport.addEventListener('scroll', handleScroll); - viewport.dataset.scrollHandler = 'attached'; + viewport.addEventListener('scroll', handleScroll, { passive: true }); + scrollHandlersRef.current.set(viewport, handleScroll); }, []); const handleUnregisterViewport = useCallback((viewport: HTMLDivElement) => { viewportsRef.current.delete(viewport); + + const handler = scrollHandlersRef.current.get(viewport); + if (handler) { + viewport.removeEventListener('scroll', handler); + scrollHandlersRef.current.delete(viewport); + } }, []); const calculateMMR = (stat: PlayerStats): number => {