-
由 Will Chen 提交于
## Summary - Create new `StreamingLoadingAnimation` component with two variants for chat streaming states - **Initial variant**: Flowing wave animation with 5 glowing orbs, staggered bounce, and gradient fills - **Streaming variant**: Pulsing indicator with rotating ring and animated "generating..." text - Replace inline animations in ChatMessage with the new component for cleaner code ## Test plan - Start the app and send a message to trigger chat streaming - Verify the initial loading animation shows glowing bouncing orbs when waiting for first response - Verify the streaming indicator shows pulsing "generating..." text while content is being generated - Check animations work correctly in both light and dark modes
🤖 Generated with [Claude Code](https://claude.com/claude-code) <!-- devin-review-badge-begin --> --- <a href="https://app.devin.ai/review/dyad-sh/dyad/pull/2425"> <picture> <source media="(prefers-color-scheme: dark)" srcset="https://static.devin.ai/assets/gh-open-in-devin-review-dark.svg?v=1"> <img src="https://static.devin.ai/assets/gh-open-in-devin-review-light.svg?v=1" alt="Open with Devin"> </picture> </a> <!-- devin-review-badge-end --> <!-- CURSOR_SUMMARY --> --- > [!NOTE] > **Low Risk** > UI-only changes that replace existing loading indicators; main risk is visual/regression or performance issues from the new animations. > > **Overview** > Adds a new `StreamingLoadingAnimation` component with two variants (`initial` and `streaming`) using `framer-motion`, rotating verbs, and a scrambled text effect. > > Updates `ChatMessage` to replace the previous inline loading/spinner animations with this shared component for both the pre-response and in-stream indicators. > > <sup>Written by [Cursor Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit 65fac50463768be2e56810c498ca5b4c694754bd. This will update automatically on new commits. Configure [here](https://cursor.com/dashboard?tab=bugbot).</sup> <!-- /CURSOR_SUMMARY --> <!-- This is an auto-generated description by cubic. --> --- ## Summary by cubic Add a reusable StreamingLoadingAnimation component with “initial” and “streaming” variants to improve chat loading feedback. Replaces ad‑hoc animations in ChatMessage for a cleaner, consistent UI. - **New Features** - StreamingLoadingAnimation component: - initial: glowing orb wave - streaming: organic equalizer bars - Rotating verbs with scramble text reveal; theme-aware colors - **Refactors** - ChatMessage now uses the new component instead of inline framer-motion blocks - Centralizes animation styles; no changes to streaming logic <sup>Written for commit 65fac50463768be2e56810c498ca5b4c694754bd. Summary will update on new commits.</sup> <!-- End of auto-generated description by cubic. --> --------- Co-authored-by:Claude Opus 4.5 <noreply@anthropic.com>