Skip to content

fix(ui): print next steps before animating the "Next steps" header#343

Open
rafa-thayto wants to merge 2 commits into
mainfrom
fix/next-steps-animation-order
Open

fix(ui): print next steps before animating the "Next steps" header#343
rafa-thayto wants to merge 2 commits into
mainfrom
fix/next-steps-animation-order

Conversation

@rafa-thayto

Copy link
Copy Markdown
Contributor

Summary

The glimmering "Next steps" header animated by redrawing only its own line in place (\r\x1b[K) for ~450ms, and every caller printed the actual steps after the animation finished. The result was a lone, shimmering "Next steps" with nothing under it — it looked hung/broken.

animateHeader now takes an optional body: it prints the whole block (header + steps) up front so everything is visible immediately, then steps the cursor back up to the header and sweeps the highlight in place, restoring the cursor below the block. Backward compatible — without a body it behaves exactly as before.

Wired through the two call sites: spinner.outro([steps]) (covers clerk link, auth login, init, and any gutter next-steps) and clerk deploy. log.applyPrefix is exported so the deploy body keeps its gutter prefix.

Verified the real escape sequence ordering:

<HIDE> header + all steps printed  →  <UP n>  →  header redraws (sweep)  →  <DOWN n>  →  <SHOW>

Test plan

  • New tests in gradient.test.ts: body printed in one write (non-interactive); body rendered before the first in-place redraw with correct cursor up/down (interactive)
  • spinner.test.ts, deploy tests pass; non-interactive / NO_COLOR / piped output unchanged (single flat write, no cursor escapes)

@changeset-bot

changeset-bot Bot commented Jun 16, 2026

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: 4cd15ff

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
clerk Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@coderabbitai

coderabbitai Bot commented Jun 16, 2026

Copy link
Copy Markdown

Warning

Review limit reached

@rafa-thayto, we couldn't start this review because you've reached your PR review rate limit.

More reviews will be available in 55 minutes and 49 seconds. Learn how PR review limits work.

Your organization has used up its prepaid credits, and credit purchases are no longer available. Enable the review add-on in the billing tab to keep reviews running — you're only billed for reviews past your plan's rate limits ($0.25/file).

⌛ How to resolve this issue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based credits.

🚦 How do rate limits work?

CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan refill rate.

For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, the refill rate gradually slows as usage increases. The highest same-day bursts are limited more strictly.

Please see our Fair Usage Limits Policy for further information.

ℹ️ Review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 01eddc7e-a623-4478-a341-0984f9beacb8

📥 Commits

Reviewing files that changed from the base of the PR and between 4240dd5 and 4cd15ff.

📒 Files selected for processing (6)
  • .changeset/next-steps-animation-order.md
  • packages/cli-core/src/commands/deploy/index.ts
  • packages/cli-core/src/lib/gradient.test.ts
  • packages/cli-core/src/lib/gradient.ts
  • packages/cli-core/src/lib/log.ts
  • packages/cli-core/src/lib/spinner.ts

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@wyattjoh wyattjoh left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Clean, well-tested fix for the lone "Next steps" header. One edge case worth noting around tall bodies and terminal scrolling, but it does not regress the prior behavior.

Comment thread packages/cli-core/src/lib/gradient.ts
animateHeader redrew only the header line in place, so the 'Next steps' header
shimmered alone for the duration of the animation while the steps printed only
afterward, making it look hung. Print the whole block up front, then step the
cursor back up to sweep the header in place.

Covers clerk link, clerk auth login, clerk init, and clerk deploy next-steps.
The cursor-up escape that repositions the header only works when the
block fits on screen without scrolling. With a tall next-steps body
(~27 lines for deploy), a short terminal scrolls the buffer and the
cursor-up no longer lands on the header, corrupting the output.

Guard against this by comparing rowsBelow against process.stderr.rows
before entering the animation path.
@rafa-thayto rafa-thayto force-pushed the fix/next-steps-animation-order branch from b9c96ef to 4cd15ff Compare June 18, 2026 12:18
@rafa-thayto rafa-thayto requested a review from wyattjoh June 18, 2026 12:18
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants