DEV Community

jidonglab
jidonglab

Posted on

ANSI Spinners, Progress Bars, Decorations — All Gone

Watch your terminal during npm install. See that spinning dot? That progress bar crawling across the screen? Those are ANSI animations — cursor movements that redraw the same line hundreds of times.

You see one line updating smoothly. Your AI sees hundreds of cursor movement commands stacked on top of each other.

How Terminal Animations Work

A spinner works by:

  1. Print ⠋ Loading...
  2. Move cursor to start of line (\x1b[G)
  3. Print ⠙ Loading...
  4. Move cursor to start of line
  5. Repeat 200 times

Your terminal shows one smooth animation. The raw output is 200 lines of text with cursor movement codes. Your AI ingests all 200.

A progress bar is worse:

\x1b[2K\x1b[1A\x1b[2K\x1b[G⸨░░░░░░░░░░░░░░░░░░░░⸩ 5%
\x1b[2K\x1b[1A\x1b[2K\x1b[G⸨█░░░░░░░░░░░░░░░░░░░⸩ 10%
\x1b[2K\x1b[1A\x1b[2K\x1b[G⸨██░░░░░░░░░░░░░░░░░░⸩ 15%
... (17 more updates)
\x1b[2K\x1b[1A\x1b[2K\x1b[G⸨████████████████████⸩ 100%
Enter fullscreen mode Exit fullscreen mode

20 versions of the same progress bar. Each with 30+ bytes of escape codes. Your AI reads them all.

After ContextZip

added 847 packages in 12s
💾 contextzip: 12,847 → 142 chars (99% saved)
Enter fullscreen mode Exit fullscreen mode

All spinner frames → gone. All progress bar updates → gone. All cursor movement codes → gone. The final result preserved.

99% savings on animation-heavy output. This is where ANSI stripping alone (which RTK does) falls short — you need to understand that cursor movement codes mean "this line replaces the previous one" and collapse them.

cargo install contextzip
eval "$(contextzip init)"
Enter fullscreen mode Exit fullscreen mode

GitHub: github.com/contextzip/contextzip


Part of the ContextZip Daily series. Follow for daily tips on optimizing your AI coding workflow.

Install: npx contextzip | GitHub: jee599/contextzip

Top comments (0)