From 413d85bbf9ab5628e34b14abaeaf308e0aa1ecdf Mon Sep 17 00:00:00 2001
From: Manav Rathi <manav@mrmr.io>
Date: Fri, 11 Oct 2024 18:39:05 +0530
Subject: [PATCH] Differentiate

---
 .../new/photos/components/gallery/index.tsx   | 45 ++++++++++++-------
 1 file changed, 29 insertions(+), 16 deletions(-)

diff --git a/web/packages/new/photos/components/gallery/index.tsx b/web/packages/new/photos/components/gallery/index.tsx
index 15c7827793..84486b4839 100644
--- a/web/packages/new/photos/components/gallery/index.tsx
+++ b/web/packages/new/photos/components/gallery/index.tsx
@@ -12,7 +12,8 @@ import type { SearchOption } from "@/new/photos/services/search/types";
 import { VerticallyCentered } from "@ente/shared/components/Container";
 import { Typography } from "@mui/material";
 import { t } from "i18next";
-import React from "react";
+import React, { useSyncExternalStore } from "react";
+import { mlStatusSnapshot, mlStatusSubscribe } from "../../services/ml";
 import { GalleryItemsHeaderAdapter, GalleryItemsSummary } from "./ListHeader";
 
 /**
@@ -43,18 +44,30 @@ export const SearchResultsHeader: React.FC<SearchResultsHeaderProps> = ({
     </GalleryItemsHeaderAdapter>
 );
 
-export const PeopleEmptyState: React.FC = () => (
-    <VerticallyCentered>
-        <Typography
-            color="text.muted"
-            sx={{
-                // Approximately compensate for the hidden section bar (86px),
-                // and then add a bit extra padding so that the message appears
-                // visually off the center, towards the top.
-                paddingBlockEnd: "126px",
-            }}
-        >
-            {pt("People will appear here once indexing completes")}
-        </Typography>
-    </VerticallyCentered>
-);
+export const PeopleEmptyState: React.FC = () => {
+    const mlStatus = useSyncExternalStore(mlStatusSubscribe, mlStatusSnapshot);
+
+    const message =
+        mlStatus?.phase == "done"
+            ? pt(
+                  "People will appear here when there are sufficient photos of a person",
+              )
+            : pt("People will appear here once sync completes");
+
+    return (
+        <VerticallyCentered>
+            <Typography
+                color="text.muted"
+                sx={{
+                    mx: 1,
+                    // Approximately compensate for the hidden section bar (86px),
+                    // and then add a bit extra padding so that the message appears
+                    // visually off the center, towards the top.
+                    paddingBlockEnd: "126px",
+                }}
+            >
+                {message}
+            </Typography>
+        </VerticallyCentered>
+    );
+};