fix rAF

src/Common/dataAccess/readCollections.ts

@@ -1,6 +1,5 @@
 import { ContainerResponse } from "@azure/cosmos";
 import { Queries } from "Common/Constants";
-import * as Logger from "Common/Logger";
 import { CosmosDbArtifactType } from "Contracts/FabricMessagesContract";
 import { isFabric, isFabricMirroredKey } from "Platform/Fabric/FabricUtil";
 import { AuthType } from "../../AuthType";
@@ -62,14 +61,7 @@ export async function readCollections(databaseId: string): Promise<DataModels.Co
       return await readCollectionsWithARM(databaseId);
     }
 
-    Logger.logInfo(`readCollections: calling fetchAll for database ${databaseId}`, "readCollections");
-    const fetchAllStart = Date.now();
     const sdkResponse = await client().database(databaseId).containers.readAll().fetchAll();
-    Logger.logInfo(
-      `readCollections: fetchAll completed for database ${databaseId}, count=${sdkResponse.resources
-        ?.length}, durationMs=${Date.now() - fetchAllStart}`,
-      "readCollections",
-    );
     return sdkResponse.resources as DataModels.Collection[];
   } catch (error) {
     handleError(error, "ReadCollections", `Error while querying containers for database ${databaseId}`);

src/Explorer/Explorer.tsx

@@ -107,12 +107,6 @@ export default class Explorer {
 
   private static readonly MaxNbDatabasesToAutoExpand = 5;
   public phoenixClient: PhoenixClient;
-
-  /**
-   * Resolves when the initial refreshAllDatabases (including collection loading) completes.
-   * Await this instead of calling refreshAllDatabases again to avoid duplicate concurrent loads.
-   */
-  public databasesRefreshed: Promise<void> = Promise.resolve();
   constructor() {
     const startKey: number = TelemetryProcessor.traceStart(Action.InitializeDataExplorer, {
       dataExplorerArea: Constants.Areas.ResourceTree,
@@ -1203,11 +1197,9 @@ export default class Explorer {
     }
 
     if (userContext.apiType !== "Postgres" && userContext.apiType !== "VCoreMongo") {
-      this.databasesRefreshed =
-        userContext.authType === AuthType.ResourceToken
-          ? this.refreshDatabaseForResourceToken()
-          : this.refreshAllDatabases();
-      await this.databasesRefreshed; // await: we rely on the databases to be loaded before restoring the tabs further in the flow
+      userContext.authType === AuthType.ResourceToken
+        ? this.refreshDatabaseForResourceToken()
+        : await this.refreshAllDatabases(); // await: we rely on the databases to be loaded before restoring the tabs further in the flow
     }
 
     if (!isFabricNative()) {

src/Explorer/Panes/StringInputPane/__snapshots__/StringInputPane.test.tsx.snap

@@ -8,7 +8,6 @@ exports[`StringInput Pane should render Create new directory properly 1`] = `
   explorer={
     Explorer {
       "_isInitializingNotebooks": false,
-      "databasesRefreshed": Promise {},
       "isFixedCollectionWithSharedThroughputSupported": [Function],
       "isTabsContentExpanded": [Function],
       "onRefreshDatabasesKeyPress": [Function],

src/Metrics/useMetricPhases.ts

@@ -1,25 +1,41 @@
 import React from "react";
 import MetricScenario from "./MetricEvents";
-import { scenarioMonitor } from "./ScenarioMonitor";
 import { ApplicationMetricPhase, CommonMetricPhase } from "./ScenarioConfig";
+import { scenarioMonitor } from "./ScenarioMonitor";
 
 /**
- * Hook to automatically complete the Interactive phase when the component becomes interactive.
- * Uses requestAnimationFrame to complete after the browser has painted.
+ * Completes the Interactive phase once the browser is ready to paint.
  *
- * Calls scenarioMonitor directly (not via React context) so that the effect dependencies
- * are only [scenario, enabled] — both stable primitives. This prevents re-renders from
- * cancelling the pending rAF due to an unstable context function reference.
+ * Uses requestAnimationFrame with a setTimeout fallback. In foreground tabs rAF fires
+ * first (~16 ms) giving an accurate "browser painted" signal. In background tabs browsers
+ * suspend rAF indefinitely, so the setTimeout fallback (1 s) completes the phase instead —
+ * well within the 10 s scenario timeout — preventing false-negative unhealthy reports.
  */
 export function useInteractive(scenario: MetricScenario, enabled = true) {
   React.useEffect(() => {
     if (!enabled) {
       return undefined;
     }
-    const id = requestAnimationFrame(() => {
+
+    let completed = false;
+    const complete = () => {
+      if (completed) {
+        return;
+      }
+      completed = true;
+      cancelAnimationFrame(rafId);
+      clearTimeout(timeoutId);
       scenarioMonitor.completePhase(scenario, CommonMetricPhase.Interactive);
-    });
-    return () => cancelAnimationFrame(id);
+    };
+
+    const rafId = requestAnimationFrame(complete);
+    // Fallback for background tabs where rAF is suspended.
+    const timeoutId = setTimeout(complete, 1000);
+
+    return () => {
+      cancelAnimationFrame(rafId);
+      clearTimeout(timeoutId);
+    };
   }, [scenario, enabled]);
 }
 

src/hooks/useKnockoutExplorer.ts

@@ -165,7 +165,7 @@ async function configureFabric(): Promise<Explorer> {
               explorer = createExplorerFabricLegacy(initializationMessage, data.version);
               await scheduleRefreshFabricToken(true);
               resolve(explorer);
-              await explorer.databasesRefreshed;
+              await explorer.refreshAllDatabases();
               if (userContext.fabricContext.isVisible) {
                 firstContainerOpened = true;
                 openFirstContainer(explorer, userContext.fabricContext.databaseName);
@@ -189,7 +189,7 @@ async function configureFabric(): Promise<Explorer> {
               }
 
               resolve(explorer);
-              await explorer.databasesRefreshed;
+              await explorer.refreshAllDatabases();
 
               const { databaseName } = userContext.fabricContext;
               if (userContext.fabricContext.isVisible && databaseName) {