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 }