From 7bfddfedce34a1ea56f5542db0c0648685bb1566 Mon Sep 17 00:00:00 2001
From: Shailesh Pandit <shailesh.pandit@gmail.com>
Date: Mon, 29 Nov 2021 11:46:29 +0530
Subject: [PATCH] Handle async updates in PeopleList

---
 src/components/PeopleList.tsx      | 27 +++++++++++++++++----------
 src/utils/machineLearning/index.ts |  4 ++--
 2 files changed, 19 insertions(+), 12 deletions(-)

diff --git a/src/components/PeopleList.tsx b/src/components/PeopleList.tsx
index 323177704..6ebae7698 100644
--- a/src/components/PeopleList.tsx
+++ b/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>;
 }
diff --git a/src/utils/machineLearning/index.ts b/src/utils/machineLearning/index.ts
index d804b5df3..0c33c652d 100644
--- a/src/utils/machineLearning/index.ts
+++ b/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',