Skip to content

feat: add loading animations with global API proxy integration - #7

Merged
scottlovegrove merged 1 commit into
mainfrom
scottl/animation
Jan 22, 2026
Merged

feat: add loading animations with global API proxy integration#7
scottlovegrove merged 1 commit into
mainfrom
scottl/animation

Conversation

@scottlovegrove

Copy link
Copy Markdown
Collaborator

Summary

Add NPM-style loading spinners to all CLI commands using a global API proxy approach that automatically wraps all Twist API calls with appropriate loading animations.

Key Features

  • 🔄 Global API Proxy: Automatically adds spinners to all TwistApi method calls without requiring code changes to existing commands
  • 🎨 Context-aware messages: Different spinners for read operations (blue), create operations (green), and update/delete operations (yellow)
  • 🔧 Zero maintenance: New API methods automatically get spinners without any additional development work
  • ⚙️ Smart configuration: Auto-disables in CI environments, non-TTY terminals, and JSON output modes
  • 📱 Professional UX: Provides immediate visual feedback during network operations, similar to NPM's loading experience

Implementation Details

Core Components

  • yocto-spinner package (2KB, zero dependencies) - Modern, lightweight spinner library
  • src/lib/spinner.ts - Core spinner utilities with withSpinner function and LoadingSpinner class
  • src/lib/api.ts - Enhanced with Proxy wrapper that intercepts all API calls
  • Global configuration - --no-spinner option and TW_SPINNER=false environment variable support

API Method Mapping

The proxy automatically maps API methods to appropriate loading messages:

Method Message Color
users.getSessionUser() "Checking authentication..." Blue
workspaces.getWorkspaces() "Loading workspaces..." Blue
threads.getThread() "Loading thread..." Blue
comments.createComment() "Creating comment..." Green
comments.updateComment() "Updating comment..." Yellow
inbox.archiveThread() "Archiving thread..." Yellow
+ 15 other methods Context-appropriate messages Semantic colors

Configuration Options

Users can disable spinners using:

  • CLI flag: tw auth status --no-spinner
  • Environment variable: TW_SPINNER=false tw auth status
  • Auto-detection: Automatically disabled in CI, non-TTY, and JSON output modes

Testing

  • ✅ All existing tests pass (100% backward compatibility)
  • ✅ 14 new spinner-specific test cases covering success/error scenarios
  • ✅ Configuration options tested (flags, env vars, CI detection)
  • ✅ Manual testing across multiple commands (tw auth status, tw inbox, etc.)

Benefits

  1. Complete Coverage: Every API call across all commands now has loading feedback
  2. Zero Technical Debt: No need to remember to add spinners to new commands
  3. Consistent UX: Uniform professional experience across the entire CLI
  4. Backward Compatible: All existing functionality works exactly as before
  5. Future-Proof: New API methods automatically inherit spinner behavior

Demo

# Shows "Checking authentication..." spinner
tw auth status

# Shows "Loading inbox..." spinner  
tw inbox --limit 10

# Shows "Creating comment..." spinner
tw thread reply <thread-id> "Great point!"

# Disable globally
tw inbox --no-spinner

This implementation transforms the CLI into a modern, professional tool with immediate user feedback during network operations while requiring zero changes to existing command implementations.

🤖 Generated with Claude Code

Add NPM-style loading spinners to all CLI commands using a global API proxy approach that automatically wraps all Twist API calls with appropriate loading animations.

Key Features:
- Global API Proxy: Automatically adds spinners to all TwistApi method calls without requiring code changes to existing commands
- Context-aware messages: Different spinners for read operations (blue), create operations (green), and update/delete operations (yellow)
- Zero maintenance: New API methods automatically get spinners without any additional development work
- Smart configuration: Auto-disables in CI environments, non-TTY terminals, and JSON output modes
- Professional UX: Provides immediate visual feedback during network operations, similar to NPM's loading experience

Core Components:
- yocto-spinner package (2KB, zero dependencies) - Modern, lightweight spinner library
- src/lib/spinner.ts - Core spinner utilities with withSpinner function and LoadingSpinner class
- src/lib/api.ts - Enhanced with Proxy wrapper that intercepts all API calls
- Global configuration - --no-spinner option and TW_SPINNER=false environment variable support

Co-Authored-By: Claude Sonnet 4 <noreply@anthropic.com>
@scottlovegrove scottlovegrove self-assigned this Jan 22, 2026
@scottlovegrove
scottlovegrove requested a review from gnapse January 22, 2026 17:14
@scottlovegrove scottlovegrove added the 👀 Show PR PR must be reviewed before or after merging label Jan 22, 2026
@scottlovegrove
scottlovegrove merged commit bf53bfb into main Jan 22, 2026
2 checks passed
@scottlovegrove
scottlovegrove deleted the scottl/animation branch January 22, 2026 17:15
github-actions Bot pushed a commit that referenced this pull request Jan 22, 2026
# 1.0.0 (2026-01-22)

### Bug Fixes

* add UTF-8 charset to OAuth callback HTML responses ([#8](#8)) ([fcb2d49](fcb2d49))

### Features

* Add Biome linting, upgrade to Node 20, and add CI workflows ([#3](#3)) ([57f802e](57f802e))
* add loading animations with global API proxy integration ([#7](#7)) ([bf53bfb](bf53bfb))
* Add OAuth authentication with dynamic client registration ([#6](#6)) ([2845ebd](2845ebd)), closes [#5](#5)
* add semantic release automation for NPM publishing ([#10](#10)) ([c756324](c756324))
* Refactor login command to auth with status/logout subcommands ([#4](#4)) ([59e6493](59e6493))
@github-actions

Copy link
Copy Markdown

🎉 This PR is included in version 1.0.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

@gnapse gnapse left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

released 👀 Show PR PR must be reviewed before or after merging

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants