feat(studio): enable timeline virtualization by default (#2926)

* feat(studio): enable timeline virtualization by default

* fix(ci): measure timeline performance in production React

packages/studio/src/player/components/Timeline.test.ts

@@ -41,6 +41,10 @@ import { formatTime } from "../lib/time";
 import { usePlayerStore } from "../store/playerStore";
 import { TimelineEditProvider } from "../../contexts/TimelineEditContext";
 
+vi.mock("./timelineRowVirtualizationFlag", () => ({
+  STUDIO_TIMELINE_ROW_VIRTUALIZATION_ENABLED: false,
+}));
+
 globalThis.IS_REACT_ACT_ENVIRONMENT = true;
 
 afterEach(() => {

packages/studio/src/player/components/Timeline.virtualization.test.tsx

@@ -307,9 +307,9 @@ describe("Timeline row virtualization", { timeout: 30_000 }, () => {
 });
 
 /**
- * The flag-off build is the one users get today. It mounts every clip, so the
- * scroll-time concessions windowing makes are pure cost there: this block pins
- * the timeline to doing no per-frame work at all while a gesture runs.
+ * The rollback build mounts every clip, so the scroll-time concessions
+ * windowing makes are pure cost there. This block pins that explicit fallback
+ * to doing no per-frame work while a gesture runs.
  */
 describe("Timeline without row virtualization", { timeout: 30_000 }, () => {
   async function renderUnvirtualizedTimeline() {

packages/studio/src/player/components/timelineRowVirtualizationFlag.test.ts

@@ -0,0 +1,23 @@
+import { afterEach, describe, expect, it, vi } from "vitest";
+
+afterEach(() => {
+  vi.unstubAllEnvs();
+  vi.resetModules();
+});
+
+describe("timeline row virtualization flag", () => {
+  it("enables virtualization by default", async () => {
+    const { STUDIO_TIMELINE_ROW_VIRTUALIZATION_ENABLED } =
+      await import("./timelineRowVirtualizationFlag");
+
+    expect(STUDIO_TIMELINE_ROW_VIRTUALIZATION_ENABLED).toBe(true);
+  });
+
+  it("keeps an explicit rollback path", async () => {
+    vi.stubEnv("VITE_STUDIO_TIMELINE_ROW_VIRTUALIZATION_ENABLED", "0");
+    const { STUDIO_TIMELINE_ROW_VIRTUALIZATION_ENABLED } =
+      await import("./timelineRowVirtualizationFlag");
+
+    expect(STUDIO_TIMELINE_ROW_VIRTUALIZATION_ENABLED).toBe(false);
+  });
+});

packages/studio/src/player/components/timelineRowVirtualizationFlag.ts

@@ -1,11 +1,10 @@
 /**
- * Row virtualization opt-in. Disabled until horizontal windowing and stable
- * gesture lifetime land.
+ * Row virtualization is the product default. Setting the environment flag to
+ * "0" keeps one explicit rollback path for comparisons and emergencies.
  *
  * It lives in its own module so the scroll-viewport hook can read it without
  * importing the virtualization hook that already imports the viewport snapshot
  * type back, which would close an import cycle.
  */
 export const STUDIO_TIMELINE_ROW_VIRTUALIZATION_ENABLED =
-  import.meta.env.DEV === true &&
-  import.meta.env.VITE_STUDIO_TIMELINE_ROW_VIRTUALIZATION_ENABLED === "1";
+  import.meta.env.VITE_STUDIO_TIMELINE_ROW_VIRTUALIZATION_ENABLED !== "0";