improve: refactor AppLoadingProgress for better UX

[coji]

Summary

• Extract nextProgress() pure function and useLoadingProgress() hook for better cohesion
• Add 150ms show delay to skip bar for fast navigations (no more flicker)
• Fix timer leak: all setTimeout/setInterval properly cleaned up on unmount
• Visual: blue-500 color, shimmer effect, thinner bar (h-0.5), proper z-index

Test plan

• Slow navigation (>150ms): blue progress bar appears, trickles, snaps to 100%, fades out
• Fast navigation (<150ms): no bar shown
• Rapid consecutive navigations: no stale bars or visual glitches
• Works in both light and dark mode

🤖 Generated with Claude Code

Summary by CodeRabbit

Release Notes

• Improvements
  • Enhanced the loading progress indicator with smoother animations and refined visual transitions during page navigation. The progress bar now provides better visual feedback with improved timing and transitions for an overall smoother user experience during navigation events.

[coderabbitai]

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 1ccebed2-e272-4a27-a9b0-b3aed6799f84

📥 Commits

Reviewing files that changed from the base of the PR and between 39faa90 and abf7f65.

📒 Files selected for processing (1)

• app/components/AppLoadingProgress.tsx

---

📝 Walkthrough

Walkthrough

Enhanced AppLoadingProgress component with phased loading logic. Added asynchronous progress management including delayed visibility, interval-driven updates with easing, and multi-phase state transitions (idle → waiting → loading → completing). Preserved public API while introducing internal state coordination and cleanup handlers.

Changes

Cohort / File(s)

Summary

Loading Progress Enhancement app/components/AppLoadingProgress.tsx

Implemented phased loading progress system with four states: idle, waiting, loading, and completing. Added nextProgress() for asymptotic easing, SHOW_DELAY_MS constant for delayed visibility, and useLoadingProgress() internal hook for state management. Introduced useRef-based internal state coordination (phase, progress, timers) with comprehensive cleanup logic for delay, interval, and fade transitions.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Poem

🐰 Progress phases dance and flow,
From waiting dreams to loading's glow,
Through easing curves and shimmer bright,
Each phase completes the loading rite! ✨

✨ Finishing Touches

• 📝 Generate docstrings (stacked PR)
• 📝 Generate docstrings (commit on current branch)

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch improve/loading-progress

📝 Coding Plan

• Generate coding plan for human review comments

---

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

• X
• Mastodon
• Reddit
• LinkedIn

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