Merge branch 'fix-load-timeline-problem' into 'main'

Change to useRef

See merge request soapbox-pub/soapbox!3325
This commit is contained in:
Alex Gleason 2025-02-06 00:17:38 +00:00
commit 848ea94bf5
1 changed files with 17 additions and 11 deletions

View File

@ -1,6 +1,6 @@
import { debounce } from 'es-toolkit'; import { debounce } from 'es-toolkit';
import { OrderedSet as ImmutableOrderedSet } from 'immutable'; import { OrderedSet as ImmutableOrderedSet } from 'immutable';
import { useCallback, useEffect, useState } from 'react'; import { useCallback, useEffect, useRef, useState } from 'react';
import { dequeueTimeline, scrollTopTimeline } from 'soapbox/actions/timelines.ts'; import { dequeueTimeline, scrollTopTimeline } from 'soapbox/actions/timelines.ts';
import StatusList, { IStatusList } from 'soapbox/components/status-list.tsx'; import StatusList, { IStatusList } from 'soapbox/components/status-list.tsx';
@ -34,7 +34,7 @@ const Timeline: React.FC<ITimeline> = ({
const hasQueuedItems = useAppSelector(state => state.timelines.get(timelineId)?.totalQueuedItemsCount || 0); const hasQueuedItems = useAppSelector(state => state.timelines.get(timelineId)?.totalQueuedItemsCount || 0);
const [isInTop, setIsInTop] = useState<boolean>(window.scrollY < 50); const [isInTop, setIsInTop] = useState<boolean>(window.scrollY < 50);
const [intervalId, setIntervalId] = useState<NodeJS.Timeout | null>(null); const intervalRef = useRef<NodeJS.Timeout | null>(null);
const handleDequeueTimeline = useCallback(() => { const handleDequeueTimeline = useCallback(() => {
@ -58,18 +58,24 @@ const Timeline: React.FC<ITimeline> = ({
useEffect(() => { useEffect(() => {
if (isInTop) { if (isInTop) {
handleDequeueTimeline(); if (!intervalRef.current) {
const interval = setInterval(handleDequeueTimeline, 2000); handleDequeueTimeline();
setIntervalId(interval); const interval = setInterval(handleDequeueTimeline, 2000);
dispatch(setNotification({ timelineId: timelineId, value: false })); intervalRef.current = interval;
dispatch(setNotification({ timelineId: timelineId, value: false }));
} else if (intervalId) { }
clearInterval(intervalId); } else {
setIntervalId(null); if (intervalRef.current) {
clearInterval(intervalRef.current);
intervalRef.current = null;
}
} }
return () => { return () => {
if (intervalId) clearInterval(intervalId); if (intervalRef.current) {
clearInterval(intervalRef.current);
intervalRef.current = null;
}
}; };
}, [isInTop, handleDequeueTimeline]); }, [isInTop, handleDequeueTimeline]);