beenull/ente
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

use state for timeStampList and make its update useEffect concurrency to 1

Browse source
This commit is contained in:
Abhinav 2023-01-19 17:25:40 +05:30
parent 9b76011171
commit 934f7be314
1 changed files with 67 additions and 54 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

35
src/components/PhotoList.tsx
View file

@ -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 { Box, Link, styled } from '@mui/material';
import { EnteFile } from 'types/file';
@ -178,17 +178,16 @@ export function PhotoList({
resetFetching,
}: Props) {
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(
PublicCollectionGalleryContext
);
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);
let columns = Math.ceil(fittableColumns);
@ -207,6 +206,12 @@ export function PhotoList({
};
useEffect(() => {
const main = () => {
if (refreshInProgress.current) {
shouldRefresh.current = true;
return;
}
refreshInProgress.current = true;
let timeStampList: TimeStampListItem[] = [];
if (galleryContext.photoListHeader) {
@ -252,9 +257,13 @@ export function PhotoList({
}
}
timeStampListRef.current = timeStampList;
filteredDataCopyRef.current = filteredData;
refreshList();
setTimeStampList(timeStampList);
if (shouldRefresh.current) {
shouldRefresh.current = false;
setTimeout(main, 0);
}
};
main();
}, [
width,
height,
@ -268,6 +277,10 @@ export function PhotoList({
deduplicateContext.fileSizeMap,
]);
useEffect(() => {
refreshList();
}, [timeStampList]);
const groupByFileSize = (timeStampList: TimeStampListItem[]) => {
let index = 0;
while (index < filteredData.length) {
@ -587,7 +600,7 @@ export function PhotoList({
case ITEM_TYPE.FILE: {
const ret = listItem.items.map((item, idx) =>
getThumbnail(
filteredDataCopy,
filteredData,
listItem.itemStartIndex + idx,
isScrolling
)