[WEB-3699]fix: create link modal text flicker#6860
Conversation
WalkthroughThe changes remove the Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant Dashboard as DashboardQuickLinks
participant Modal as LinkCreateUpdateModal
User->>Dashboard: Click "Create Link" button
Dashboard->>Dashboard: Invoke handleCreateLinkModal()
Dashboard->>Modal: Call toggleLinkModal(true)
Modal->>User: Display modal without external state update
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
✨ 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:
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
CodeRabbit Configuration File (
|
|
Pull Request Linked with Plane Work Items Comment Automatically Generated by Plane |
![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 (1)
web/core/components/home/widgets/links/root.tsx (1)
20-23: New memoized handler addresses text flicker issueThe new
handleCreateLinkModalfunction usinguseCallbackcombines both opening the modal and resetting link data in one memoized function. This helps prevent unnecessary re-renders that likely caused the text flicker.However, the dependency array is empty, which could lead to stale closures if
toggleLinkModalorsetLinkDatachange.- const handleCreateLinkModal = useCallback(() => { - toggleLinkModal(true); - setLinkData(undefined); - }, []); + const handleCreateLinkModal = useCallback(() => { + toggleLinkModal(true); + setLinkData(undefined); + }, [toggleLinkModal, setLinkData]);
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
web/core/components/home/widgets/links/create-update-link-modal.tsx(1 hunks)web/core/components/home/widgets/links/root.tsx(3 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (2)
- GitHub Check: Analyze (javascript)
- GitHub Check: Analyze (python)
🔇 Additional comments (6)
web/core/components/home/widgets/links/create-update-link-modal.tsx (3)
19-24: Type definition has been simplified, improving component encapsulationThe removal of
setLinkDataproperty from theTLinkCreateEditModaltype definition is a good improvement. It simplifies the component's interface and removes the external state management responsibility from the modal component.
33-33: Prop destructuring updated to match type definitionThe destructured props now correctly reflect the updated type definition, removing the
setLinkDataprop.
45-47: Modal close handler has been simplifiedThe
onClosefunction has been simplified to only handle closing the modal, removing the external state management responsibility. This is a cleaner approach and likely helps prevent the text flicker issue by eliminating unnecessary re-renders.web/core/components/home/widgets/links/root.tsx (3)
1-1: Added useCallback import for performance optimizationGood addition of the useCallback hook to optimize the modal open handler function.
46-46: Improved onClick handler with memoized functionUsing the memoized
handleCreateLinkModalfunction instead of an inline function helps prevent unnecessary re-renders and fixes the text flicker issue in the modal title and submit button.
36-41: Modal props updated to match revised component interfaceThe
LinkCreateUpdateModalcomponent no longer receives thesetLinkDataprop, which aligns with the changes in the component definition. This is a more predictable approach to state management and helps address the flicker issue.
3 participants
Description
This update fixes the text flicker issue in modal title and submit button.
Type of Change
Screenshots and Media (if applicable)
Test Scenarios
References
WEB-3699
Summary by CodeRabbit
New Features
Refactor