Title Generation Animation #995
Conversation
📝 WalkthroughWalkthroughA shimmer loading effect was added to the note title input in the editor header to indicate when the title is being generated. This includes a new shimmer component, a pending state hook, updated input behavior, and corresponding localization entries for the new loading message. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant NoteHeader
participant useTitleGenerationPendingState
participant TitleShimmer
participant TitleInput
User->>NoteHeader: Open or trigger title generation
NoteHeader->>useTitleGenerationPendingState: Check if title is generating
useTitleGenerationPendingState-->>NoteHeader: Return isTitleGenerating (bool)
NoteHeader->>TitleShimmer: Render with isShimmering = isTitleGenerating
TitleShimmer->>TitleInput: Render with isGenerating = isTitleGenerating
TitleInput-->>User: Show "Generating title..." and disable input if generating
Possibly related PRs
✨ Finishing Touches
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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
Documentation and Community
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
apps/desktop/src/components/editor-area/note-header/title-input.tsx (1)
28-34: Simplify by inlining the placeholder logic.The
getPlaceholderfunction can be replaced with inline conditional logic for better simplicity and adherence to the minimal approach guideline.- const getPlaceholder = () => { - if (isGenerating) { - return t`Generating title...`; - } - return t`Untitled`; - };And update the placeholder prop:
- placeholder={getPlaceholder()} + placeholder={isGenerating ? t`Generating title...` : t`Untitled`}apps/desktop/src/components/editor-area/note-header/title-shimmer.tsx (1)
12-18: Consider removing the resize event listener complexity.The resize event listener and key state appear to be unnecessary complexity. The shimmer animation should work fine without forcing re-renders on window resize, and this adds potential performance overhead.
- const [key, setKey] = useState(0); - - useEffect(() => { - const handleResize = () => setKey(prev => prev + 1); - window.addEventListener("resize", handleResize); - return () => window.removeEventListener("resize", handleResize); - }, []);And remove the key prop:
- <div key={key} className={cn("relative w-full overflow-hidden", className)}> + <div className={cn("relative w-full overflow-hidden", className)}>
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (7)
apps/desktop/src/components/editor-area/note-header/index.tsx(3 hunks)apps/desktop/src/components/editor-area/note-header/title-input.tsx(2 hunks)apps/desktop/src/components/editor-area/note-header/title-shimmer.tsx(1 hunks)apps/desktop/src/hooks/enhance-pending.ts(1 hunks)apps/desktop/src/locales/en/messages.po(2 hunks)apps/desktop/src/locales/ko/messages.po(2 hunks)apps/docs/data/i18n.json(1 hunks)
🧰 Additional context used
📓 Path-based instructions (1)
`**/*.{js,ts,tsx,rs}`: 1. No error handling. 2. No unused imports, variables, or functions. 3. For comments, keep it minimal. It should be about "Why", not "What".
**/*.{js,ts,tsx,rs}: 1. No error handling.
2. No unused imports, variables, or functions.
3. For comments, keep it minimal. It should be about "Why", not "What".
apps/desktop/src/components/editor-area/note-header/index.tsxapps/desktop/src/hooks/enhance-pending.tsapps/desktop/src/components/editor-area/note-header/title-input.tsxapps/desktop/src/components/editor-area/note-header/title-shimmer.tsx
⏰ Context from checks skipped due to timeout of 90000ms (2)
- GitHub Check: ci (macos, macos-latest)
- GitHub Check: ci (windows, windows-latest)
🔇 Additional comments (14)
apps/desktop/src/hooks/enhance-pending.ts (1)
18-30: LGTM! Clean hook implementation following established patterns.The new hook correctly follows the same pattern as
useEnhancePendingState, with proper memoization and appropriate mutation key filtering for title generation tracking.apps/docs/data/i18n.json (1)
4-5: Translation count updates are consistent.The incremented totals correctly reflect the addition of the new "Generating title..." string, with Korean remaining untranslated as expected.
Also applies to: 9-9
apps/desktop/src/locales/en/messages.po (2)
623-625: Localization entry properly formatted.The new "Generating title..." translation entry follows correct gettext format with appropriate source file reference.
1083-1083: Line number reference correctly updated.The source line reference for "Untitled" was appropriately updated to reflect changes in the source file.
apps/desktop/src/locales/ko/messages.po (1)
623-625: Korean localization changes consistent with English file.The translation entries properly mirror the English file changes, with empty msgstr values as expected for untranslated content.
Also applies to: 1083-1083
apps/desktop/src/components/editor-area/note-header/index.tsx (3)
6-6: Clean import additions for new functionality.The new imports are properly used in the component implementation.
Also applies to: 10-10
24-24: Proper hook usage for title generation state.The hook is correctly called and the returned state is appropriately used throughout the component.
37-45: Well-structured shimmer integration.The
TitleShimmerwrapper withTitleInputinside creates a clean loading state implementation. TheisGeneratingprop correctly communicates the pending state to the input component.apps/desktop/src/components/editor-area/note-header/title-input.tsx (3)
9-9: LGTM: Clean prop addition.The optional
isGeneratingprop is well-typed and integrates cleanly with the existing interface.
37-37: Excellent disabled state logic.The condition correctly disables the input when either not editable or when generating, providing clear feedback to users.
43-43: Nice touch with the opacity transition.The 200ms transition provides smooth visual feedback when the placeholder changes during generation state.
apps/desktop/src/components/editor-area/note-header/title-shimmer.tsx (3)
20-22: Clean early return pattern.The conditional rendering when not shimmering is clean and efficient.
26-40: Excellent shimmer animation implementation.The framer-motion animation is well-configured with appropriate timing, easing, and visual styling. The gradient effect and movement create a polished loading state.
41-43: Good visual feedback during loading.The reduced opacity and pulse animation on the children provide clear indication that content is in a loading state.
2 participants
No description provided.