Simplify calculations using truncation

Author: amcaplan

packages/cli-kit/src/private/node/ui/components/Tasks.test.tsx

@@ -65,13 +65,13 @@ describe('Tasks', () => {
 
     // Then
     expect(unstyled(renderInstance.lastFrame()!)).toMatchInlineSnapshot(`
-      "▁▁▁▂▂▃▃▄▄▅▅▆▆▇▇██▇▇▆▆▅▅▄▄▃▃▂▂▁▁▁▁▂▂▃▃▄▄▅▅▆▆▇▇██▇▇▆▆▅▅▄▄▃▃▂▂▁
+      "▁▁▁▂▂▃▃▄▄▅▅▆▆▇▇██▇▇▆▆▅▅▄▄▃▃▂▂▁▁▁▁▂▂▃▃▄▄▅▅▆▆▇▇██▇▇▆▆▅▅▄▄▃▃▂▂▁▁▁▁▂▂▃▃▄▄▅▅▆▆▇▇██▇▇▆
       task 1 ..."
     `)
     expect(firstTaskFunction).toHaveBeenCalled()
   })
 
-  test('shrinks the no-color display for narrow screens', async () => {
+  test('truncates the no-color display correctly for narrow screens', async () => {
     // Given
     vi.mocked(useStdout).mockReturnValue({
       stdout: new Stdout({
@@ -95,7 +95,7 @@ describe('Tasks', () => {
 
     // Then
     expect(unstyled(renderInstance.lastFrame()!)).toMatchInlineSnapshot(`
-      "▁▁▂▃▄▅▆▇█▇▆▅▄▃▂
+      "▁▁▁▂▂▃▃▄▄▅▅▆▆▇▇██▇▇▆
       task 1 ..."
     `)
     expect(firstTaskFunction).toHaveBeenCalled()

packages/cli-kit/src/private/node/ui/components/Tasks.tsx

@@ -10,15 +10,7 @@ import {Box, Text, useStdin, useInput} from 'ink'
 import React, {useRef, useState} from 'react'
 
 const loadingBarChar = '▀'
-// Chars that can be arranged to form a colorless horizontal figure that displays progress as it moves.
-// The string is 15 chars long so it can always be displayed even within a box inside a 20-char-wide terminal.
-const hillString = '▁▂▃▄▅▆▇█▇▆▅▄▃▂▁'
-// Like the hill string, but forming a gentler slope for motion that is less jarring
-const gradualHillString = hillString
-  .split('')
-  .map((char) => char.repeat(2).split(''))
-  .flat()
-  .join('')
+const hillString = '▁▁▂▂▃▃▄▄▅▅▆▆▇▇██▇▇▆▆▅▅▄▄▃▃▂▂▁▁'
 
 export interface Task<TContext = unknown> {
   title: string
@@ -81,9 +73,7 @@ function Tasks<TContext>({
   const {twoThirds} = useLayout()
   let loadingBar = new Array(twoThirds).fill(loadingBarChar).join('')
   if (noColor ?? !shouldDisplayColors()) {
-    const fittingPattern = gradualHillString.length <= twoThirds ? gradualHillString : hillString
-    const fullyFittingRepeats = Math.floor(twoThirds / fittingPattern.length)
-    loadingBar = fittingPattern.repeat(Math.max(1, fullyFittingRepeats))
+    loadingBar = hillString.repeat(Math.ceil(twoThirds / hillString.length))
   }
   // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
   const [currentTask, setCurrentTask] = useState<Task<TContext>>(tasks[0]!)
@@ -138,7 +128,7 @@ function Tasks<TContext>({
 
   return state === TasksState.Loading && !isAborted ? (
     <Box flexDirection="column">
-      <TextAnimation text={loadingBar} />
+      <TextAnimation text={loadingBar} maxWidth={twoThirds} />
       <Text>{currentTask.title} ...</Text>
     </Box>
   ) : null

packages/cli-kit/src/private/node/ui/components/TextAnimation.tsx

@@ -5,6 +5,7 @@ import gradient from 'gradient-string'
 
 interface TextAnimationProps {
   text: string
+  maxWidth?: number
 }
 
 function rainbow(text: string, frame: number) {
@@ -21,10 +22,14 @@ function rotated(text: string, steps: number) {
   return start + end
 }
 
+function truncated(text: string, maxWidth: number | undefined): string {
+  return maxWidth ? text.slice(0, maxWidth) : text
+}
+
 /**
  * `TextAnimation` applies a rainbow animation to text.
  */
-const TextAnimation = memo(({text}: TextAnimationProps): JSX.Element => {
+const TextAnimation = memo(({text, maxWidth}: TextAnimationProps): JSX.Element => {
   const frame = useRef(0)
   const [renderedFrame, setRenderedFrame] = useState(text)
   const timeout = useRef<NodeJS.Timeout>()
@@ -33,12 +38,12 @@ const TextAnimation = memo(({text}: TextAnimationProps): JSX.Element => {
     const newFrame = frame.current + 1
     frame.current = newFrame
 
-    setRenderedFrame(rainbow(rotated(text, frame.current), frame.current))
+    setRenderedFrame(rainbow(truncated(rotated(text, frame.current), maxWidth), frame.current))
 
     timeout.current = setTimeout(() => {
       renderAnimation()
     }, 35)
-  }, [text])
+  }, [text, maxWidth])
 
   useLayoutEffect(() => {
     renderAnimation()