Merge pull request #5262 from Shopify/no-color-loader-bar

Replace rainbow bar with moving hill for no-color mode

Author: amcaplan

.changeset/shiny-lions-marry.md

@@ -0,0 +1,5 @@
+---
+'@shopify/cli-kit': minor
+---
+
+Improve display of loading bar in no-color mode

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

@@ -2,8 +2,28 @@ import {Task, Tasks} from './Tasks.js'
 import {getLastFrameAfterUnmount, render} from '../../testing/ui.js'
 import {unstyled} from '../../../../public/node/output.js'
 import {AbortController} from '../../../../public/node/abort.js'
+import {Stdout} from '../../ui.js'
 import React from 'react'
-import {describe, expect, test, vi} from 'vitest'
+import {beforeEach, describe, expect, test, vi} from 'vitest'
+import {useStdout} from 'ink'
+
+vi.mock('ink', async () => {
+  const original: any = await vi.importActual('ink')
+  return {
+    ...original,
+    useStdout: vi.fn(),
+  }
+})
+
+beforeEach(() => {
+  vi.mocked(useStdout).mockReturnValue({
+    stdout: new Stdout({
+      columns: 80,
+      rows: 80,
+    }) as any,
+    write: () => {},
+  })
+})
 
 describe('Tasks', () => {
   test('shows a loading state at the start', async () => {
@@ -29,6 +49,58 @@ describe('Tasks', () => {
     expect(firstTaskFunction).toHaveBeenCalled()
   })
 
+  test('shows a loading state that is useful in no-color mode', async () => {
+    // Given
+    const firstTaskFunction = vi.fn(async () => {
+      await new Promise((resolve) => setTimeout(resolve, 2000))
+    })
+
+    const firstTask = {
+      title: 'task 1',
+      task: firstTaskFunction,
+    }
+
+    // When
+    const renderInstance = render(<Tasks tasks={[firstTask]} silent={false} noColor />)
+
+    // Then
+    expect(unstyled(renderInstance.lastFrame()!)).toMatchInlineSnapshot(`
+      "▁▁▁▂▂▃▃▄▄▅▅▆▆▇▇██▇▇▆▆▅▅▄▄▃▃▂▂▁▁▁▁▂▂▃▃▄▄▅▅▆▆▇▇██▇▇▆▆▅▅▄▄▃▃▂▂▁▁▁▁▂▂▃▃▄▄▅▅▆▆▇▇██▇▇▆
+      task 1 ..."
+    `)
+    expect(firstTaskFunction).toHaveBeenCalled()
+  })
+
+  test('truncates the no-color display correctly for narrow screens', async () => {
+    // Given
+    vi.mocked(useStdout).mockReturnValue({
+      stdout: new Stdout({
+        columns: 10,
+        rows: 80,
+      }) as any,
+      write: () => {},
+    })
+
+    const firstTaskFunction = vi.fn(async () => {
+      await new Promise((resolve) => setTimeout(resolve, 2000))
+    })
+
+    const firstTask = {
+      title: 'task 1',
+      task: firstTaskFunction,
+    }
+
+    // When
+    const renderInstance = render(<Tasks tasks={[firstTask]} silent={false} noColor />)
+
+    // Then
+    expect(unstyled(renderInstance.lastFrame()!)).toMatchInlineSnapshot(`
+      "▁▁▁▂▂▃▃▄▄▅▅▆▆▇▇██▇▇▆
+      task 1 ..."
+    `)
+    expect(firstTaskFunction).toHaveBeenCalled()
+  })
+
   test('shows nothing at the end in case of success', async () => {
     // Given
     const firstTaskFunction = vi.fn(async () => {})

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

@@ -3,12 +3,14 @@ import useLayout from '../hooks/use-layout.js'
 import useAsyncAndUnmount from '../hooks/use-async-and-unmount.js'
 import {isUnitTest} from '../../../../public/node/context/local.js'
 import {AbortSignal} from '../../../../public/node/abort.js'
+import {shouldDisplayColors} from '../../../../public/node/output.js'
 import useAbortSignal from '../hooks/use-abort-signal.js'
 import {handleCtrlC} from '../../ui.js'
 import {Box, Text, useStdin, useInput} from 'ink'
 import React, {useRef, useState} from 'react'
 
 const loadingBarChar = '▀'
+const hillString = '▁▁▂▂▃▃▄▄▅▅▆▆▇▇██▇▇▆▆▅▅▄▄▃▃▂▂▁▁'
 
 export interface Task<TContext = unknown> {
   title: string
@@ -25,6 +27,7 @@ interface TasksProps<TContext> {
   silent?: boolean
   onComplete?: (ctx: TContext) => void
   abortSignal?: AbortSignal
+  noColor?: boolean
 }
 
 enum TasksState {
@@ -65,9 +68,13 @@ function Tasks<TContext>({
   silent = isUnitTest(),
   onComplete = noop,
   abortSignal,
+  noColor,
 }: React.PropsWithChildren<TasksProps<TContext>>) {
   const {twoThirds} = useLayout()
-  const loadingBar = new Array(twoThirds).fill(loadingBarChar).join('')
+  let loadingBar = new Array(twoThirds).fill(loadingBarChar).join('')
+  if (noColor ?? !shouldDisplayColors()) {
+    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]!)
   const [state, setState] = useState<TasksState>(TasksState.Loading)
@@ -121,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) {
@@ -14,10 +15,21 @@ function rainbow(text: string, frame: number) {
   return gradient(leftColor, rightColor)(text, {interpolation: 'hsv', hsvSpin: 'long'})
 }
 
+function rotated(text: string, steps: number) {
+  const normalizedSteps = steps % text.length
+  const start = text.slice(-normalizedSteps)
+  const end = text.slice(0, -normalizedSteps)
+  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>()
@@ -26,12 +38,12 @@ const TextAnimation = memo(({text}: TextAnimationProps): JSX.Element => {
     const newFrame = frame.current + 1
     frame.current = newFrame
 
-    setRenderedFrame(rainbow(text, frame.current))
+    setRenderedFrame(rainbow(truncated(rotated(text, frame.current), maxWidth), frame.current))
 
     timeout.current = setTimeout(() => {
       renderAnimation()
     }, 35)
-  }, [text])
+  }, [text, maxWidth])
 
   useLayoutEffect(() => {
     renderAnimation()