[desktop] Sync ML status immediately on login (#2726)

web/apps/photos/src/pages/gallery/index.tsx

@@ -94,7 +94,7 @@ import {
 } from "services/collectionService";
 import { syncFiles } from "services/fileService";
 import locationSearchService from "services/locationSearchService";
-import { sync } from "services/sync";
+import { sync, triggerPreFileInfoSync } from "services/sync";
 import { syncTrash } from "services/trashService";
 import uploadManager from "services/upload/uploadManager";
 import { isTokenValid } from "services/userService";
@@ -704,6 +704,7 @@ export default function Gallery() {
                 throw new Error(CustomError.SESSION_EXPIRED);
             }
             !silent && startLoading();
+            triggerPreFileInfoSync();
             const collections = await getAllLatestCollections();
             const { normalCollections, hiddenCollections } =
                 await splitNormalAndHiddenCollections(collections);

web/apps/photos/src/services/sync.ts

@@ -1,20 +1,36 @@
 import { fetchAndSaveFeatureFlagsIfNeeded } from "@/new/photos/services/feature-flags";
-import { isMLSupported, triggerMLSync } from "@/new/photos/services/ml";
+import {
+    isMLSupported,
+    triggerMLStatusSync,
+    triggerMLSync,
+} from "@/new/photos/services/ml";
 import { syncEntities } from "services/entityService";
 import { syncMapEnabled } from "services/userService";
 
+/**
+ * Part 1 of {@link sync}. See TODO below for why this is split.
+ */
+export const triggerPreFileInfoSync = () => {
+    fetchAndSaveFeatureFlagsIfNeeded();
+    if (isMLSupported) triggerMLStatusSync();
+};
+
 /**
  * Perform a soft "refresh" by making various API calls to fetch state from
  * remote, using it to update our local state, and triggering periodic jobs that
  * depend on the local state.
+ *
+ * TODO: This is called after we've synced the local files DBs with remote. That
+ * code belongs here, but currently that state is persisted in the top level
+ * gallery React component.
+ *
+ * So meanwhile we've split this sync into this method, which is called after
+ * the file info has been synced (which can take a few minutes for large
+ * libraries after initial login), and the `preFileInfoSync`, which is called
+ * before doing the file sync and thus should run immediately after login.
  */
 export const sync = async () => {
-    // TODO: This is called after we've synced the local files DBs with remote.
-    // That code belongs here, but currently that state is persisted in the top
-    // level gallery React component.
-
     await syncEntities();
     await syncMapEnabled();
-    fetchAndSaveFeatureFlagsIfNeeded();
     if (isMLSupported) triggerMLSync();
 };

web/packages/new/photos/services/ml/index.ts

@@ -270,24 +270,40 @@ const updateIsMLEnabledRemote = (enabled: boolean) =>
     updateRemoteFlag(mlRemoteKey, enabled);
 
 /**
- * Trigger a "sync", whatever that means for the ML subsystem.
+ * Sync the ML status with remote.
  *
- * This is called during the global sync sequence.
+ * This is called an at early point in the global sync sequence, without waiting
+ * for the potentially long file information sync to complete.
  *
- * * It checks with remote if the ML flag is set, and updates our local flag to
- *   reflect that value.
+ * It checks with remote if the ML flag is set, and updates our local flag to
+ * reflect that value.
  *
- * * If ML is enabled, it pulls any missing embeddings from remote and starts
- *   indexing to backfill any missing values.
+ * To trigger the actual ML sync, use {@link triggerMLSync}.
+ */
+export const triggerMLStatusSync = () => void mlStatusSync();
+
+const mlStatusSync = async () => {
+    _state.isMLEnabled = await getIsMLEnabledRemote();
+    setIsMLEnabledLocal(_state.isMLEnabled);
+    triggerStatusUpdate();
+};
+
+/**
+ * Trigger a ML sync.
+ *
+ * This is called during the global sync sequence, after files information have
+ * been synced with remote.
+ *
+ * If ML is enabled, it pulls any missing embeddings from remote and starts
+ * indexing to backfill any missing values.
+ *
+ * This will only have an effect if {@link triggerMLSync} has been called at
+ * least once prior to calling this in the sync sequence.
  */
 export const triggerMLSync = () => void mlSync();
 
 const mlSync = async () => {
-    _state.isMLEnabled = await getIsMLEnabledRemote();
-    setIsMLEnabledLocal(_state.isMLEnabled);
-    triggerStatusUpdate();
-
-    if (_state.isMLEnabled) void worker().then((w) => w.sync());
+    if (_state.isMLEnabled) await worker().then((w) => w.sync());
 };
 
 /**