[fix] Fix width flickering in some components #10712
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
sfc-gh-bnisco
commented
Mar 10, 2025
| values: [width], | ||
| elementRef, | ||
| } = useResizeObserver(useMemo(() => ["width"], [])) | ||
| const [width, elementRef] = useCalculatedWidth() |
Collaborator
Author
There was a problem hiding this comment.
note: This change is the main fix for widget width flickering. The other useCalculatedWidth updates are primarily for code simplification, ensuring a consistent pattern for width handling across all widgets.
Contributor
There was a problem hiding this comment.
PR Overview
This pull request fixes width flickering issues in several components by consolidating the width calculations into a single hook, useCalculatedWidth, and standardizing the width value to -1 when a width of 0 is observed. Key changes include:
- Refactoring usages of useResizeObserver to useCalculatedWidth across components.
- Ensuring consistent behavior by returning -1 instead of 0 when no width is detected.
- Adding unit tests for the new useCalculatedWidth hook.
Reviewed Changes
| File | Description |
|---|---|
| frontend/lib/src/hooks/useCalculatedWidth.test.ts | Added unit tests to verify the behavior of useCalculatedWidth. |
| frontend/lib/src/hooks/useCalculatedWidth.ts | Introduced the new hook that returns the observed width or -1 when width is 0. |
| frontend/lib/src/components/core/Layout/withCalculatedWidth.tsx | Updated to use useCalculatedWidth and removed redundant useMemo usage. |
| frontend/lib/src/components/elements/Popover/Popover.tsx | Replaced useResizeObserver with useCalculatedWidth. |
| frontend/lib/src/components/widgets/TextArea/TextArea.tsx | Updated to use the new hook; removed unnecessary useMemo dependency. |
| frontend/lib/src/components/widgets/TextInput/TextInput.tsx | Updated to use useCalculatedWidth instead of useResizeObserver. |
| frontend/lib/src/components/widgets/ChatInput/ChatInput.tsx | Updated to use the new hook while removing useMemo usage from the hook call. |
| frontend/lib/src/components/widgets/NumberInput/NumberInput.tsx | Updated to use useCalculatedWidth by replacing useResizeObserver and useMemo. |
| frontend/lib/src/components/shared/ElementFullscreen/ElementFullscreenWrapper.tsx | Updated to use useCalculatedWidth instead of useResizeObserver. |
Copilot reviewed 9 out of 9 changed files in this pull request and generated no comments.
Comments suppressed due to low confidence (1)
frontend/lib/src/hooks/useCalculatedWidth.ts:56
- [nitpick] Consider using an explicit check (e.g. 'return [width === 0 ? -1 : width, elementRef]') instead of relying on the falsy check to ensure that a width value of 0 is correctly mapped to -1. This offers clearer intent and prevents any unexpected behavior with other falsy values.
return [width || -1, elementRef]
sfc-gh-nbellante
approved these changes
Mar 10, 2025
kajarenc
pushed a commit
that referenced
this pull request
Mar 11, 2025
- Refactors all usages of `useResizeObserver` for their widths into a single shared `useCalculatedWidth` hook - Matches the previous behavior of setting width to `-1` instead of `0` uniformly across all components that read their own width. - Writes unit tests - Manually tested - Added unit tests --- **Contribution License Agreement** By submitting this pull request you agree that all contributions to this project are made under the Apache 2.0 license.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Describe your changes
useResizeObserverfor their widths into a single shareduseCalculatedWidthhook-1instead of0uniformly across all components that read their own width.GitHub Issue Link (if applicable)
Testing Plan
Contribution License Agreement
By submitting this pull request you agree that all contributions to this project are made under the Apache 2.0 license.