Improve tracking of animated components. (#12618)

packages/cli/src/ui/components/CliSpinner.test.tsx

@@ -0,0 +1,24 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { render } from '../../test-utils/render.js';
+import { CliSpinner } from './CliSpinner.js';
+import { debugState } from '../debug.js';
+import { describe, it, expect, beforeEach } from 'vitest';
+
+describe('<CliSpinner />', () => {
+  beforeEach(() => {
+    debugState.debugNumAnimatedComponents = 0;
+  });
+
+  it('should increment debugNumAnimatedComponents on mount and decrement on unmount', () => {
+    expect(debugState.debugNumAnimatedComponents).toBe(0);
+    const { unmount } = render(<CliSpinner />);
+    expect(debugState.debugNumAnimatedComponents).toBe(1);
+    unmount();
+    expect(debugState.debugNumAnimatedComponents).toBe(0);
+  });
+});

packages/cli/src/ui/components/CliSpinner.tsx

@@ -6,17 +6,15 @@
 
 import Spinner from 'ink-spinner';
 import { type ComponentProps, useEffect } from 'react';
-
-// A top-level field to track the total number of active spinners.
-export let debugNumSpinners = 0;
+import { debugState } from '../debug.js';
 
 export type SpinnerProps = ComponentProps<typeof Spinner>;
 
 export const CliSpinner = (props: SpinnerProps) => {
   useEffect(() => {
-    debugNumSpinners++;
+    debugState.debugNumAnimatedComponents++;
     return () => {
-      debugNumSpinners--;
+      debugState.debugNumAnimatedComponents--;
     };
   }, []);
 

packages/cli/src/ui/components/DebugProfiler.test.tsx

@@ -12,6 +12,7 @@ import {
   FRAME_TIMESTAMP_CAPACITY,
 } from './DebugProfiler.js';
 import { FixedDeque } from 'mnemonist';
+import { debugState } from '../debug.js';
 
 describe('DebugProfiler', () => {
   beforeEach(() => {
@@ -29,12 +30,14 @@ describe('DebugProfiler', () => {
       Array,
       ACTION_TIMESTAMP_CAPACITY,
     );
+    debugState.debugNumAnimatedComponents = 0;
   });
 
   afterEach(() => {
     vi.restoreAllMocks();
     profiler.actionTimestamps.clear();
     profiler.possiblyIdleFrameTimestamps.clear();
+    debugState.debugNumAnimatedComponents = 0;
   });
 
   it('should not exceed action timestamp capacity', () => {
@@ -193,4 +196,20 @@ describe('DebugProfiler', () => {
 
     expect(profiler.totalIdleFrames).toBe(0);
   });
+
+  it('should not report frames as idle if debugNumAnimatedComponents > 0', async () => {
+    const startTime = Date.now();
+    vi.setSystemTime(startTime);
+    debugState.debugNumAnimatedComponents = 1;
+
+    for (let i = 0; i < 5; i++) {
+      profiler.reportFrameRendered();
+      vi.advanceTimersByTime(20);
+    }
+
+    vi.advanceTimersByTime(1000);
+    profiler.checkForIdleFrames();
+
+    expect(profiler.totalIdleFrames).toBe(0);
+  });
 });

packages/cli/src/ui/components/DebugProfiler.tsx

@@ -9,7 +9,7 @@ import { useEffect, useState } from 'react';
 import { FixedDeque } from 'mnemonist';
 import { theme } from '../semantic-colors.js';
 import { useUIState } from '../contexts/UIStateContext.js';
-import { debugNumSpinners } from './CliSpinner.js';
+import { debugState } from '../debug.js';
 import { appEvents, AppEvent } from '../../utils/events.js';
 
 // Frames that render at least this far before or after an action are considered
@@ -52,7 +52,7 @@ export const profiler = {
     if (now - this.lastFrameStartTime > 16) {
       this.lastFrameStartTime = now;
       this.numFrames++;
-      if (debugNumSpinners === 0) {
+      if (debugState.debugNumAnimatedComponents === 0) {
         if (this.possiblyIdleFrameTimestamps.size >= FRAME_TIMESTAMP_CAPACITY) {
           this.possiblyIdleFrameTimestamps.shift();
         }