Skip to content

Conversation

@devin-ai-integration
Copy link
Contributor

Summary

Adds a shimmer loading animation to the title input field while the AI is generating a title after summary completion. When the title task is in "generating" state, the input field is replaced with an animated shimmer placeholder to provide visual feedback.

Changes:

  • Track title generation status using useAITaskTask hook in TitleInput component
  • Render shimmer placeholder when isTitleGenerating is true
  • Add animate-shimmer keyframes to Tailwind config

Closes #2628

Review & Testing Checklist for Human

  • Verify shimmer animation visually: Run the app, complete a recording session, and confirm the shimmer appears while title is being generated and looks smooth
  • Check shimmer dimensions: The shimmer is hardcoded to w-48 (192px) - verify this looks appropriate for typical title lengths and doesn't cause layout shift
  • Test the full flow: Stop recording → summary generates → title shimmer appears → title populates correctly

Test Plan

  1. Start a recording session with some speech
  2. Stop the recording
  3. Observe the summary being generated
  4. When summary completes, verify the title field shows a shimmer animation
  5. Confirm the generated title replaces the shimmer correctly

Notes

  • The shimmer animation uses a gradient background that animates from right to left
  • Animation timing is 1.5s ease-in-out infinite
  • This PR was not tested locally with the desktop app running

Link to Devin run: https://app.devin.ai/sessions/a8111e0951444951b0e961da717a4419
Requested by: john@hyprnote.com (@ComputelessComputer)

@devin-ai-integration
Copy link
Contributor Author

🤖 Devin AI Engineer

I'll be helping with this pull request! Here's what you should know:

✅ I will automatically:

  • Address comments on this PR that start with 'DevinAI' or '@devin'.
  • Look at CI failures and help fix them

Note: I can only respond to comments from users who have write access to this repository.

⚙️ Control Options:

  • Disable automatic comment and CI monitoring

@netlify
Copy link

netlify bot commented Dec 30, 2025

Deploy Preview for hyprnote-storybook canceled.

Name Link
🔨 Latest commit 2334c5d
🔍 Latest deploy log https://app.netlify.com/projects/hyprnote-storybook/deploys/6955c4938e64420008cd90f5

@netlify
Copy link

netlify bot commented Dec 30, 2025

Deploy Preview for hyprnote canceled.

Name Link
🔨 Latest commit 2334c5d
🔍 Latest deploy log https://app.netlify.com/projects/hyprnote/deploys/6955c49338e3ef000880bef7

@netlify
Copy link

netlify bot commented Dec 30, 2025

Deploy Preview for howto-fix-macos-audio-selection canceled.

Name Link
🔨 Latest commit 2334c5d
🔍 Latest deploy log https://app.netlify.com/projects/howto-fix-macos-audio-selection/deploys/6955c4938e64420008cd90f9

Show a shimmer animation in the title input field while the AI is
generating a title after summary completion. This provides visual
feedback to users that the title is being auto-generated.

Closes #2628

Co-Authored-By: john@hyprnote.com <john@hyprnote.com>
@ComputelessComputer ComputelessComputer force-pushed the devin/1767094530-title-shimmer-animation branch from 23998b5 to 2334c5d Compare January 1, 2026 00:49
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.

generate note title when title field is empty

2 participants