Function BriefSpinner

src/components/Spinner.tsx:412–483

({ mode, overrideMessage }: BriefSpinnerProps)

};

function BriefSpinner({ mode, overrideMessage }: BriefSpinnerProps): React.ReactNode {
  const settings = useSettings();
  const reducedMotion = settings.prefersReducedMotion ?? false;
  const [randomVerb] = useState(() => sample(getSpinnerVerbs()) ?? 'Working');
  const verb = overrideMessage ?? randomVerb;
  const connStatus = useAppState(s => s.remoteConnectionStatus);

  // Track CLI activity so OS/IDE "busy" indicators fire in brief mode too
  useEffect(() => {
    const operationId = 'spinner-' + mode;
    activityManager.startCLIActivity(operationId);
    return () => {
      activityManager.endCLIActivity(operationId);
    };
  }, [mode]);

  // Drive both dot cycle and shimmer from the shared clock. The viewport
  // ref is unused — the spinner unmounts on turn end so viewport-based
  // pausing isn't needed.
  const [, time] = useAnimationFrame(reducedMotion ? null : 120);

  // Local tasks + remote tasks are mutually exclusive (viewer mode has an
  // empty local AppState.tasks; local mode has remoteBackgroundTaskCount=0).
  // Summing avoids a mode branch.
  const runningCount = useAppState(s => count(Object.values(s.tasks), isBackgroundTask) + s.remoteBackgroundTaskCount);

  // Connection trouble overrides the verb — `claude assistant` is a pure viewer,
  // nothing useful is happening while the WS is down.
  const showConnWarning = connStatus === 'reconnecting' || connStatus === 'disconnected';
  const connText = connStatus === 'reconnecting' ? 'Reconnecting' : 'Disconnected';

  // Dots padded to a fixed 3 columns so the right-aligned count doesn't
  // jitter as the cycle advances.
  const dotFrame = Math.floor(time / 300) % 3;
  const dots = reducedMotion ? '…  ' : '.'.repeat(dotFrame + 1).padEnd(3);

  // Shimmer: reverse-sweep highlight across the verb. Skip for connection
  // warnings (shimmer reads as "working"; Reconnecting/Disconnected is not).
  const verbWidth = useMemo(() => stringWidth(verb), [verb]);
  const glimmerIndex =
    reducedMotion || showConnWarning ? -100 : computeGlimmerIndex(Math.floor(time / SHIMMER_INTERVAL_MS), verbWidth);
  const { before, shimmer, after } = computeShimmerSegments(verb, glimmerIndex);

  const { columns } = useTerminalSize();
  const rightText = runningCount > 0 ? `${runningCount} in background` : '';
  // Manual right-align via space padding — flexGrow spacers inside
  // FullscreenLayout's `main` slot don't resolve a width and caused the
  // diff engine to miss dot-frame updates.
  const leftWidth = (showConnWarning ? stringWidth(connText) : verbWidth) + 3;
  const pad = Math.max(1, columns - 2 - leftWidth - stringWidth(rightText));

  return (
    <Box flexDirection="row" width="100%" marginTop={1} paddingLeft={2}>
      {showConnWarning ? (
        <Text color="error">{connText + dots}</Text>
      ) : (
        <>
          {before ? <Text dimColor>{before}</Text> : null}