Thinking indicator

'use client';

import * as React from 'react';
import {
  type GridPattern,
  ThinkingIndicator,
  type ThinkingStatus,
  type ThinkingVariant,
} from './thinking-indicator';

const ROWS: { variant: ThinkingVariant; pattern?: GridPattern; doneAfter: number }[] = [
  { variant: 'orbit', doneAfter: 2600 },
  { variant: 'dots', doneAfter: 3400 },
  { variant: 'pulse', doneAfter: 4100 },
  { variant: 'scan', doneAfter: 4800 },
  { variant: 'grid', pattern: 'wave', doneAfter: 5300 },
  { variant: 'grid', pattern: 'orbit', doneAfter: 5900 },
];

export default function ThinkingIndicatorDemo({ replay = 0 }: { replay?: number }) {
  const [startedAt, setStartedAt] = React.useState<number>();
  const [done, setDone] = React.useState<boolean[]>(() => ROWS.map(() => false));

  // The clock is read on the client only, so the prerendered page and the first client render agree.
  React.useEffect(() => setStartedAt(Date.now()), []);

  React.useEffect(() => {
    if (replay === 0) return;
    setStartedAt(Date.now());
    setDone(ROWS.map(() => false));
    const timers = ROWS.map((row, i) =>
      window.setTimeout(() => setDone((list) => list.map((d, j) => d || j === i)), row.doneAfter),
    );
    return () => {
      for (const id of timers) window.clearTimeout(id);
    };
  }, [replay]);

  return (
    <div className="flex flex-col gap-lg">
      {ROWS.map((row, i) => {
        const status: ThinkingStatus = done[i] ? 'done' : 'running';
        return (
          <ThinkingIndicator
            key={`${row.variant}-${row.pattern ?? ''}`}
            variant={row.variant}
            pattern={row.pattern}
            status={status}
            startedAt={startedAt}
          />
        );
      })}
    </div>
  );
}