Go back to tracking currentlyLoading via state and not ref

This commit is contained in:
mabashian
2021-06-03 09:29:12 -04:00
committed by Alan Rominger
parent ddf4fbc4ce
commit 3cc6a4cf44

View File

@@ -301,10 +301,10 @@ function JobOutput({ job, eventRelatedSearchableKeys, eventSearchableKeys }) {
const isMounted = useIsMounted(); const isMounted = useIsMounted();
const scrollTop = useRef(0); const scrollTop = useRef(0);
const scrollHeight = useRef(0); const scrollHeight = useRef(0);
const currentlyLoading = useRef([]);
const history = useHistory(); const history = useHistory();
const [contentError, setContentError] = useState(null); const [contentError, setContentError] = useState(null);
const [cssMap, setCssMap] = useState({}); const [cssMap, setCssMap] = useState({});
const [currentlyLoading, setCurrentlyLoading] = useState([]);
const [hasContentLoading, setHasContentLoading] = useState(true); const [hasContentLoading, setHasContentLoading] = useState(true);
const [hostEvent, setHostEvent] = useState({}); const [hostEvent, setHostEvent] = useState({});
const [isHostModalOpen, setIsHostModalOpen] = useState(false); const [isHostModalOpen, setIsHostModalOpen] = useState(false);
@@ -359,7 +359,7 @@ function JobOutput({ job, eventRelatedSearchableKeys, eventSearchableKeys }) {
if (listRef.current?.recomputeRowHeights) { if (listRef.current?.recomputeRowHeights) {
listRef.current.recomputeRowHeights(); listRef.current.recomputeRowHeights();
} }
}, [cssMap, remoteRowCount]); }, [currentlyLoading, cssMap, remoteRowCount]);
useEffect(() => { useEffect(() => {
if (jobStatus && !isJobRunning(jobStatus)) { if (jobStatus && !isJobRunning(jobStatus)) {
@@ -427,7 +427,9 @@ function JobOutput({ job, eventRelatedSearchableKeys, eventSearchableKeys }) {
if (isMounted.current) { if (isMounted.current) {
setHasContentLoading(true); setHasContentLoading(true);
currentlyLoading.current = currentlyLoading.current.concat(loadRange); setCurrentlyLoading(prevCurrentlyLoading =>
prevCurrentlyLoading.concat(loadRange)
);
} }
try { try {
@@ -493,8 +495,8 @@ function JobOutput({ job, eventRelatedSearchableKeys, eventSearchableKeys }) {
} finally { } finally {
if (isMounted.current) { if (isMounted.current) {
setHasContentLoading(false); setHasContentLoading(false);
currentlyLoading.current = currentlyLoading.current.filter( setCurrentlyLoading(prevCurrentlyLoading =>
n => !loadRange.includes(n) prevCurrentlyLoading.filter(n => !loadRange.includes(n))
); );
loadRange.forEach(n => { loadRange.forEach(n => {
cache.clear(n); cache.clear(n);
@@ -507,7 +509,7 @@ function JobOutput({ job, eventRelatedSearchableKeys, eventSearchableKeys }) {
if (results[index]) { if (results[index]) {
return true; return true;
} }
return currentlyLoading.current.includes(index); return currentlyLoading.includes(index);
}; };
const handleHostEventClick = hostEventToOpen => { const handleHostEventClick = hostEventToOpen => {
@@ -575,7 +577,9 @@ function JobOutput({ job, eventRelatedSearchableKeys, eventSearchableKeys }) {
); );
if (isMounted.current) { if (isMounted.current) {
currentlyLoading.current = currentlyLoading.current.concat(loadRange); setCurrentlyLoading(prevCurrentlyLoading =>
prevCurrentlyLoading.concat(loadRange)
);
} }
const params = { const params = {
@@ -602,8 +606,8 @@ function JobOutput({ job, eventRelatedSearchableKeys, eventSearchableKeys }) {
...prevCssMap, ...prevCssMap,
...newResultsCssMap, ...newResultsCssMap,
})); }));
currentlyLoading.current = currentlyLoading.current.filter( setCurrentlyLoading(prevCurrentlyLoading =>
n => !loadRange.includes(n) prevCurrentlyLoading.filter(n => !loadRange.includes(n))
); );
loadRange.forEach(n => { loadRange.forEach(n => {
cache.clear(n); cache.clear(n);