Use

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

@@ -303,9 +303,7 @@ const mlStatusSync = async () => {
 export const triggerMLSync = () => void mlSync();
 
 const mlSync = async () => {
-    await mlStatusSync();
-
-    if (_state.isMLEnabled) void worker().then((w) => w.sync());
+    if (_state.isMLEnabled) await worker().then((w) => w.sync());
 };
 
 /**