From dd9cd53176ade2d0a67f2b7a48b83132602cc1b8 Mon Sep 17 00:00:00 2001
From: Manav Rathi <manav@mrmr.io>
Date: Wed, 11 Sep 2024 10:41:47 +0530
Subject: [PATCH] Live updates

---
 web/apps/photos/src/components/SearchBar.tsx | 21 ++++++++++++--------
 1 file changed, 13 insertions(+), 8 deletions(-)

diff --git a/web/apps/photos/src/components/SearchBar.tsx b/web/apps/photos/src/components/SearchBar.tsx
index d19aa79cc7..3a8ee1ba56 100644
--- a/web/apps/photos/src/components/SearchBar.tsx
+++ b/web/apps/photos/src/components/SearchBar.tsx
@@ -1,7 +1,11 @@
 import { assertionFailed } from "@/base/assert";
 import { useIsMobileWidth } from "@/base/hooks";
 import { FileType } from "@/media/file-type";
-import { isMLSupported, mlStatusSnapshot } from "@/new/photos/services/ml";
+import {
+    isMLSupported,
+    mlStatusSnapshot,
+    mlStatusSubscribe,
+} from "@/new/photos/services/ml";
 import type {
     City,
     SearchDateComponents,
@@ -47,6 +51,7 @@ import {
     useMemo,
     useRef,
     useState,
+    useSyncExternalStore,
 } from "react";
 import {
     components as SelectComponents,
@@ -417,29 +422,29 @@ interface EmptyStateProps {
  * search box.
  */
 const EmptyState: React.FC<EmptyStateProps> = () => {
-    const status = mlStatusSnapshot();
+    const mlStatus = useSyncExternalStore(mlStatusSubscribe, mlStatusSnapshot);
 
-    if (!status || status.phase == "disabled") {
+    if (!mlStatus || mlStatus.phase == "disabled") {
         assertionFailed();
         return <></>;
     }
 
     let label: string;
-    switch (status.phase) {
+    switch (mlStatus.phase) {
         case "scheduled":
             label = t("indexing_scheduled");
             break;
         case "indexing":
-            label = t("indexing_photos", status);
+            label = t("indexing_photos", mlStatus);
             break;
         case "fetching":
-            label = t("indexing_fetching", status);
+            label = t("indexing_fetching", mlStatus);
             break;
         case "clustering":
-            label = t("indexing_people", status);
+            label = t("indexing_people", mlStatus);
             break;
         case "done":
-            label = t("indexing_done", status);
+            label = t("indexing_done", mlStatus);
             break;
     }