Merge branch 'fix-load-timeline-problem' into 'main'
Change to useRef See merge request soapbox-pub/soapbox!3325
This commit is contained in:
commit
848ea94bf5
|
@ -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]);
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue