make progress animation prettier with a spinner

Author: jordanverasamy

packages/app/src/cli/services/watch-bulk-operation.test.ts

@@ -2,22 +2,27 @@ import {watchBulkOperation} from './watch-bulk-operation.js'
 import {adminRequest} from '@shopify/cli-kit/node/api/admin'
 import {ensureAuthenticatedAdmin} from '@shopify/cli-kit/node/session'
 import {sleep} from '@shopify/cli-kit/node/system'
-import {outputInfo} from '@shopify/cli-kit/node/output'
-import {describe, test, expect, vi, beforeEach} from 'vitest'
+import {describe, test, expect, vi, beforeEach, afterEach} from 'vitest'
 
 vi.mock('@shopify/cli-kit/node/api/admin')
 vi.mock('@shopify/cli-kit/node/session')
 vi.mock('@shopify/cli-kit/node/system')
-vi.mock('@shopify/cli-kit/node/output')
 
 describe('watchBulkOperation', () => {
   const mockSession = {token: 'test-token', storeFqdn: 'test-store.myshopify.com'}
   const operationId = 'gid://shopify/BulkOperation/123'
+  let stdoutWriteSpy: unknown
 
   beforeEach(() => {
     vi.mocked(ensureAuthenticatedAdmin).mockResolvedValue(mockSession)
     vi.mocked(sleep).mockResolvedValue()
-    vi.mocked(outputInfo).mockReturnValue()
+    stdoutWriteSpy = vi.spyOn(process.stdout, 'write').mockImplementation(() => true)
+  })
+
+  afterEach(() => {
+    if (stdoutWriteSpy && typeof stdoutWriteSpy === 'object' && 'mockRestore' in stdoutWriteSpy) {
+      ;(stdoutWriteSpy as {mockRestore: () => void}).mockRestore()
+    }
   })
 
   test('polls until operation reaches COMPLETED status', async () => {
@@ -33,6 +38,7 @@ describe('watchBulkOperation', () => {
     })
 
     expect(result).toEqual(bulkOperation(400, 'COMPLETED'))
+    expect(stdoutWriteSpy).toHaveBeenCalled()
   })
 
   test('stops polling and returns the bulk operation when it is FAILED', async () => {

packages/app/src/cli/services/watch-bulk-operation.ts

@@ -2,7 +2,6 @@ import {GetBulkOperationById, BulkOperation, GetBulkOperationByIdSchema} from '.
 import {adminRequest} from '@shopify/cli-kit/node/api/admin'
 import {ensureAuthenticatedAdmin} from '@shopify/cli-kit/node/session'
 import {sleep} from '@shopify/cli-kit/node/system'
-import {outputInfo} from '@shopify/cli-kit/node/output'
 
 interface WatchBulkOperationOptions {
   id: string
@@ -11,28 +10,48 @@ interface WatchBulkOperationOptions {
 
 const TERMINAL_STATUSES = ['COMPLETED', 'FAILED', 'CANCELED', 'EXPIRED']
 const POLL_INTERVAL_SECONDS = 5
+const SPINNER_FRAMES = ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏']
 
 export async function watchBulkOperation(options: WatchBulkOperationOptions): Promise<BulkOperation | null> {
   const {id, storeFqdn} = options
   const adminSession = await ensureAuthenticatedAdmin(storeFqdn)
 
-  while (true) {
-    // eslint-disable-next-line no-await-in-loop
-    const response = await adminRequest<GetBulkOperationByIdSchema>(GetBulkOperationById, adminSession, {id})
+  let frameIndex = 0
+  let currentOperation: BulkOperation | null = null
+  let isDone = false
 
-    if (!response.node) {
-      outputInfo(`bulk operation ${id} not found`)
-      return null
-    }
+  const spinnerInterval = setInterval(() => {
+    if (isDone) return
+    if (!currentOperation) return
 
-    const operation = response.node
-    outputInfo(`${operation.status} - ${operation.objectCount} objects`)
+    const spinner = SPINNER_FRAMES[frameIndex % SPINNER_FRAMES.length]
+    frameIndex++
 
-    if (TERMINAL_STATUSES.includes(operation.status)) {
-      return operation
-    }
+    process.stdout.write(`\r\x1b[K${spinner} ${currentOperation.status} - ${currentOperation.objectCount} objects`)
+  }, 80)
+
+  try {
+    while (true) {
+      // eslint-disable-next-line no-await-in-loop
+      const response = await adminRequest<GetBulkOperationByIdSchema>(GetBulkOperationById, adminSession, {id})
+
+      if (!response.node) {
+        process.stdout.write('\r\x1b[K')
+        return null
+      }
 
-    // eslint-disable-next-line no-await-in-loop
-    await sleep(POLL_INTERVAL_SECONDS)
+      currentOperation = response.node
+
+      if (TERMINAL_STATUSES.includes(currentOperation.status)) {
+        process.stdout.write('\n')
+        return currentOperation
+      }
+
+      // eslint-disable-next-line no-await-in-loop
+      await sleep(POLL_INTERVAL_SECONDS)
+    }
+  } finally {
+    isDone = true
+    clearInterval(spinnerInterval)
   }
 }