Skip to content

Fix: flickering of items with large dividers in Overflow component#28767

Merged
ValentinaKozlova merged 4 commits intomicrosoft:masterfrom
ValentinaKozlova:fix/overflow-flickering
Aug 9, 2023
Merged

Fix: flickering of items with large dividers in Overflow component#28767
ValentinaKozlova merged 4 commits intomicrosoft:masterfrom
ValentinaKozlova:fix/overflow-flickering

Conversation

@ValentinaKozlova
Copy link
Contributor

@ValentinaKozlova ValentinaKozlova commented Aug 7, 2023

Previous Behavior

flickering

New Behavior

flickering-fixed

Related Issue(s)

@fabricteam
Copy link
Collaborator

fabricteam commented Aug 7, 2023

Perf Analysis (@fluentui/react-components)

Scenario Render type Master Ticks PR Ticks Iterations Status
FluentProviderWithTheme virtual-rerender-with-unmount 75 73 10 Possible regression
All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 631 642 5000
Button mount 315 326 5000
Field mount 1118 1098 5000
FluentProvider mount 679 680 5000
FluentProviderWithTheme mount 79 85 10
FluentProviderWithTheme virtual-rerender 66 70 10
FluentProviderWithTheme virtual-rerender-with-unmount 75 73 10 Possible regression
InfoButton mount 11 8 5000
MakeStyles mount 845 856 50000
Persona mount 1722 1701 5000
SpinButton mount 1360 1370 5000

@codesandbox-ci
Copy link

codesandbox-ci bot commented Aug 7, 2023

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 55b2912:

Sandbox Source
@fluentui/react 8 starter Configuration
@fluentui/react-components 9 starter Configuration

@fabricteam
Copy link
Collaborator

fabricteam commented Aug 7, 2023

📊 Bundle size report

Package & Exports Baseline (minified/GZIP) PR Change
priority-overflow
createOverflowManager
4.324 kB
1.771 kB
4.162 kB
1.735 kB
-162 B
-36 B
react-overflow
hooks only
12.581 kB
4.73 kB
12.419 kB
4.687 kB
-162 B
-43 B
Unchanged fixtures
Package & Exports Size (minified/GZIP)
react-components
react-components: Button, FluentProvider & webLightTheme
66.476 kB
18.474 kB
react-components
react-components: Accordion, Button, FluentProvider, Image, Menu, Popover
202.879 kB
57.574 kB
react-components
react-components: FluentProvider & webLightTheme
37.649 kB
12.34 kB
react-portal-compat
PortalCompatProvider
6.48 kB
2.203 kB
🤖 This report was generated against d0e28b405dc91c4682aec72dd784767a3ce95c78

@size-auditor
Copy link

size-auditor bot commented Aug 7, 2023

Asset size changes

Size Auditor did not detect a change in bundle size for any component!

Baseline commit: 9509e950254d838cdfe3718a775ba5c78cb8f11a (build)

@ValentinaKozlova ValentinaKozlova marked this pull request as ready for review August 8, 2023 13:20
@ValentinaKozlova ValentinaKozlova requested a review from a team as a code owner August 8, 2023 13:20
@ValentinaKozlova ValentinaKozlova mentioned this pull request Aug 8, 2023
28 tasks
@ValentinaKozlova ValentinaKozlova merged commit b52b544 into microsoft:master Aug 9, 2023
@ValentinaKozlova ValentinaKozlova deleted the fix/overflow-flickering branch August 9, 2023 13:26
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Bug]: Flickering of items with large dividers in Overflow component

3 participants