Fixing metrics (#2395)

* Fixing metrics

* run prettier

src/Metrics/useMetricPhases.ts

@@ -1,24 +1,26 @@
 import React from "react";
 import MetricScenario from "./MetricEvents";
-import { useMetricScenario } from "./MetricScenarioProvider";
+import { scenarioMonitor } from "./ScenarioMonitor";
 import { ApplicationMetricPhase, CommonMetricPhase } from "./ScenarioConfig";
 
 /**
  * Hook to automatically complete the Interactive phase when the component becomes interactive.
  * Uses requestAnimationFrame to complete after the browser has painted.
+ *
+ * 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.
  */
 export function useInteractive(scenario: MetricScenario, enabled = true) {
-  const { completePhase } = useMetricScenario();
-
   React.useEffect(() => {
     if (!enabled) {
       return undefined;
     }
     const id = requestAnimationFrame(() => {
-      completePhase(scenario, CommonMetricPhase.Interactive);
+      scenarioMonitor.completePhase(scenario, CommonMetricPhase.Interactive);
     });
     return () => cancelAnimationFrame(id);
-  }, [scenario, completePhase, enabled]);
+  }, [scenario, enabled]);
 }
 
 /**
@@ -26,18 +28,20 @@ export function useInteractive(scenario: MetricScenario, enabled = true) {
  * Tracks tree rendering and completes Interactive phase.
  * Only completes DatabaseTreeRendered if the database fetch was successful.
  * Note: Scenario must be started before databases are fetched (in refreshExplorer).
+ *
+ * Calls scenarioMonitor directly (not via React context) for the same stability reason
+ * as useInteractive — avoids effect re-runs from unstable context function references.
  */
 export function useDatabaseLoadScenario(databaseTreeNodes: unknown[], fetchSucceeded: boolean) {
-  const { completePhase } = useMetricScenario();
   const hasCompletedTreeRenderRef = React.useRef(false);
 
   // Track DatabaseTreeRendered phase (only if fetch succeeded)
   React.useEffect(() => {
     if (!hasCompletedTreeRenderRef.current && fetchSucceeded) {
       hasCompletedTreeRenderRef.current = true;
-      completePhase(MetricScenario.DatabaseLoad, ApplicationMetricPhase.DatabaseTreeRendered);
+      scenarioMonitor.completePhase(MetricScenario.DatabaseLoad, ApplicationMetricPhase.DatabaseTreeRendered);
     }
-  }, [databaseTreeNodes, fetchSucceeded, completePhase]);
+  }, [databaseTreeNodes, fetchSucceeded]);
 
   // Track Interactive phase
   useInteractive(MetricScenario.DatabaseLoad);