/ src / components / ToolUseLoader.tsx
ToolUseLoader.tsx
 1  import { Box, Text } from 'ink'
 2  import React from 'react'
 3  import { useInterval } from '../hooks/useInterval.js'
 4  import { getTheme } from '../utils/theme.js'
 5  import { BLACK_CIRCLE } from '../constants/figures.js'
 6  
 7  type Props = {
 8    isError: boolean
 9    isUnresolved: boolean
10    shouldAnimate: boolean
11  }
12  
13  export function ToolUseLoader({
14    isError,
15    isUnresolved,
16    shouldAnimate,
17  }: Props): React.ReactNode {
18    const [isVisible, setIsVisible] = React.useState(true)
19  
20    useInterval(() => {
21      if (!shouldAnimate) {
22        return
23      }
24      // To avoid flickering when the tool use confirm is visible, we set the loader to be visible
25      // when the tool use confirm is visible.
26      setIsVisible(_ => !_)
27    }, 600)
28  
29    const color = isUnresolved
30      ? getTheme().secondaryText
31      : isError
32        ? getTheme().error
33        : getTheme().success
34  
35    return (
36      <Box minWidth={2}>
37        <Text color={color}>{isVisible ? BLACK_CIRCLE : '  '}</Text>
38      </Box>
39    )
40  }