use state for timeStampList and make its update useEffect concurrency to 1
This commit is contained in:
parent
9b76011171
commit
934f7be314
|
@ -1,4 +1,4 @@
|
||||||
import React, { useRef, useEffect, useContext } from 'react';
|
import React, { useRef, useEffect, useContext, useState } from 'react';
|
||||||
import { VariableSizeList as List } from 'react-window';
|
import { VariableSizeList as List } from 'react-window';
|
||||||
import { Box, Link, styled } from '@mui/material';
|
import { Box, Link, styled } from '@mui/material';
|
||||||
import { EnteFile } from 'types/file';
|
import { EnteFile } from 'types/file';
|
||||||
|
@ -178,17 +178,16 @@ export function PhotoList({
|
||||||
resetFetching,
|
resetFetching,
|
||||||
}: Props) {
|
}: Props) {
|
||||||
const galleryContext = useContext(GalleryContext);
|
const galleryContext = useContext(GalleryContext);
|
||||||
|
|
||||||
const timeStampListRef = useRef([]);
|
|
||||||
const timeStampList = timeStampListRef?.current ?? [];
|
|
||||||
const filteredDataCopyRef = useRef([]);
|
|
||||||
const filteredDataCopy = filteredDataCopyRef.current ?? [];
|
|
||||||
const listRef = useRef(null);
|
|
||||||
const publicCollectionGalleryContext = useContext(
|
const publicCollectionGalleryContext = useContext(
|
||||||
PublicCollectionGalleryContext
|
PublicCollectionGalleryContext
|
||||||
);
|
);
|
||||||
const deduplicateContext = useContext(DeduplicateContext);
|
const deduplicateContext = useContext(DeduplicateContext);
|
||||||
|
|
||||||
|
const [timeStampList, setTimeStampList] = useState<TimeStampListItem[]>([]);
|
||||||
|
const refreshInProgress = useRef(false);
|
||||||
|
const shouldRefresh = useRef(false);
|
||||||
|
const listRef = useRef(null);
|
||||||
|
|
||||||
const fittableColumns = getFractionFittableColumns(width);
|
const fittableColumns = getFractionFittableColumns(width);
|
||||||
let columns = Math.ceil(fittableColumns);
|
let columns = Math.ceil(fittableColumns);
|
||||||
|
|
||||||
|
@ -207,6 +206,12 @@ export function PhotoList({
|
||||||
};
|
};
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
|
const main = () => {
|
||||||
|
if (refreshInProgress.current) {
|
||||||
|
shouldRefresh.current = true;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
refreshInProgress.current = true;
|
||||||
let timeStampList: TimeStampListItem[] = [];
|
let timeStampList: TimeStampListItem[] = [];
|
||||||
|
|
||||||
if (galleryContext.photoListHeader) {
|
if (galleryContext.photoListHeader) {
|
||||||
|
@ -252,9 +257,13 @@ export function PhotoList({
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
timeStampListRef.current = timeStampList;
|
setTimeStampList(timeStampList);
|
||||||
filteredDataCopyRef.current = filteredData;
|
if (shouldRefresh.current) {
|
||||||
refreshList();
|
shouldRefresh.current = false;
|
||||||
|
setTimeout(main, 0);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
main();
|
||||||
}, [
|
}, [
|
||||||
width,
|
width,
|
||||||
height,
|
height,
|
||||||
|
@ -268,6 +277,10 @@ export function PhotoList({
|
||||||
deduplicateContext.fileSizeMap,
|
deduplicateContext.fileSizeMap,
|
||||||
]);
|
]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
refreshList();
|
||||||
|
}, [timeStampList]);
|
||||||
|
|
||||||
const groupByFileSize = (timeStampList: TimeStampListItem[]) => {
|
const groupByFileSize = (timeStampList: TimeStampListItem[]) => {
|
||||||
let index = 0;
|
let index = 0;
|
||||||
while (index < filteredData.length) {
|
while (index < filteredData.length) {
|
||||||
|
@ -587,7 +600,7 @@ export function PhotoList({
|
||||||
case ITEM_TYPE.FILE: {
|
case ITEM_TYPE.FILE: {
|
||||||
const ret = listItem.items.map((item, idx) =>
|
const ret = listItem.items.map((item, idx) =>
|
||||||
getThumbnail(
|
getThumbnail(
|
||||||
filteredDataCopy,
|
filteredData,
|
||||||
listItem.itemStartIndex + idx,
|
listItem.itemStartIndex + idx,
|
||||||
isScrolling
|
isScrolling
|
||||||
)
|
)
|
||||||
|
|
Loading…
Reference in a new issue