• Will Chen's avatar
    Add delightful streaming loading animation (#2425) · e991d732
    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: 's avatarClaude Opus 4.5 <noreply@anthropic.com>
    e991d732
StreamingLoadingAnimation.tsx 6.7 KB