#BootLoop

import { useState } from 'react';
import { BootLoop } from '@aora-bot/surfaces';

export default function Demo() {
  const [cycles, setCycles] = useState(0);
  return (
    <div className="site-demo site-demo--column">
      <BootLoop
        title="正在启动工作区"
        body={cycles >= 3 ? '比平时慢一些。' : '正在把一切接上线。'}
        durationMs={1800}
        onCycle={setCycles}
      />
      <span className="site-demo__label">已循环 {cycles} 次</span>
    </div>
  );
}

import { useEffect, useState } from 'react';
import { LoadingMark } from '@aora-bot/surfaces';

export default function Demo() {
  const [ready, setReady] = useState(false);
  useEffect(() => {
    const timer = setInterval(() => setReady((r) => !r), 2200);
    return () => clearInterval(timer);
  }, []);

  return (
    <div className="site-demo">
      {(['hex', 'cloud', 'star'] as const).map((shape) => (
        <div className="site-demo__cell" key={shape}>
          <LoadingMark shape={shape} color="violet" ready={ready} sizePx={48} />
          <span className="site-demo__label">{ready ? '就绪' : '加载中'}</span>
        </div>
      ))}
    </div>
  );
}