Handle async updates in PeopleList

src/components/PeopleList.tsx

@@ -55,14 +55,19 @@ export interface PhotoPeopleListProps extends PeopleListPropsBase {
 export function PhotoPeopleList(props: PhotoPeopleListProps) {
     const [people, setPeople] = useState<Array<Person>>([]);
 
-    const updateFaceImages = async () => {
-        const people = await getPeopleList(props.file);
-        setPeople(people);
-    };
-
     useEffect(() => {
-        // TODO: handle multiple async updates
+        let didCancel = false;
+
+        async function updateFaceImages() {
+            const people = await getPeopleList(props.file);
+            !didCancel && setPeople(people);
+        }
+
         updateFaceImages();
+
+        return () => {
+            didCancel = true;
+        };
     }, [props.file]);
 
     return <PeopleList people={people} onSelect={props.onSelect}></PeopleList>;
@@ -76,20 +81,22 @@ export function AllPeopleList(props: AllPeopleListProps) {
     const [people, setPeople] = useState<Array<Person>>([]);
 
     useEffect(() => {
-        // TODO: handle multiple async updates
+        let didCancel = false;
+
         async function updateFaceImages() {
             let people = await getAllPeople();
             if (props.limit) {
                 people = people.slice(0, props.limit);
             }
-            setPeople(people);
+            !didCancel && setPeople(people);
         }
 
         updateFaceImages();
+
         return () => {
-            setPeople([]);
+            didCancel = true;
         };
-    }, [props]);
+    }, [props.limit]);
 
     return <PeopleList people={people} onSelect={props.onSelect}></PeopleList>;
 }

src/utils/machineLearning/index.ts

@@ -229,8 +229,8 @@ export function findFirstIfSorted<T>(
 }
 
 export const DEFAULT_ML_SYNC_CONFIG: MLSyncConfig = {
-    syncIntervalSec: 5, // 300
-    batchSize: 5, // 200
+    syncIntervalSec: 5, // 20
+    batchSize: 200,
     faceDetection: {
         method: {
             value: 'BlazeFace',