Generic Virtualizer#25451
Merged
Mitch-At-Work merged 3 commits intoJan 18, 2023
Merged
Conversation
Collaborator
📊 Bundle size reportUnchanged fixtures
|
Asset size changesSize Auditor did not detect a change in bundle size for any component! Baseline commit: 87cdc8bf6f3aa6e24241a143044bfeb9c5d6e0d0 (build) |
Collaborator
Perf Analysis (
|
| Scenario | Render type | Master Ticks | PR Ticks | Iterations | Status |
|---|---|---|---|---|---|
| Avatar | mount | 1259 | 1265 | 5000 | |
| Button | mount | 917 | 928 | 5000 | |
| FluentProvider | mount | 1511 | 1499 | 5000 | |
| FluentProviderWithTheme | mount | 580 | 583 | 10 | |
| FluentProviderWithTheme | virtual-rerender | 541 | 549 | 10 | |
| FluentProviderWithTheme | virtual-rerender-with-unmount | 576 | 579 | 10 | |
| InfoButton | mount | 518 | 518 | 5000 | |
| MakeStyles | mount | 1974 | 1965 | 50000 | |
| Persona | mount | 2785 | 2797 | 5000 | |
| SpinButton | mount | 2320 | 2333 | 5000 |
Collaborator
Perf Analysis (
|
Collaborator
Perf Analysis (
|
| Scenario | Render type | Master Ticks | PR Ticks | Iterations | Status |
|---|---|---|---|---|---|
| BaseButton | mount | 1250 | 1193 | 5000 | |
| Breadcrumb | mount | 2860 | 2825 | 1000 | |
| Checkbox | mount | 2706 | 2749 | 5000 | |
| CheckboxBase | mount | 2371 | 2403 | 5000 | |
| ChoiceGroup | mount | 4340 | 4356 | 5000 | |
| ComboBox | mount | 1221 | 1183 | 1000 | |
| CommandBar | mount | 9595 | 9462 | 1000 | |
| ContextualMenu | mount | 10832 | 10824 | 1000 | |
| DefaultButton | mount | 1364 | 1372 | 5000 | |
| DetailsRow | mount | 3364 | 3392 | 5000 | |
| DetailsRowFast | mount | 3444 | 3396 | 5000 | |
| DetailsRowNoStyles | mount | 3228 | 3268 | 5000 | |
| Dialog | mount | 2983 | 2975 | 1000 | |
| DocumentCardTitle | mount | 570 | 582 | 1000 | |
| Dropdown | mount | 3180 | 3158 | 5000 | |
| FocusTrapZone | mount | 1980 | 1995 | 5000 | |
| FocusZone | mount | 1991 | 1952 | 5000 | |
| GroupedList | mount | 1881 | 2099 | 2 | |
| GroupedList | virtual-rerender | 1140 | 1126 | 2 | |
| GroupedList | virtual-rerender-with-unmount | 1654 | 1617 | 2 | |
| GroupedListV2 | mount | 561 | 598 | 2 | |
| GroupedListV2 | virtual-rerender | 545 | 549 | 2 | |
| GroupedListV2 | virtual-rerender-with-unmount | 568 | 559 | 2 | |
| IconButton | mount | 1803 | 1807 | 5000 | |
| Label | mount | 751 | 787 | 5000 | |
| Layer | mount | 4202 | 4212 | 5000 | |
| Link | mount | 842 | 905 | 5000 | |
| MenuButton | mount | 1600 | 1608 | 5000 | |
| MessageBar | mount | 2340 | 2326 | 5000 | |
| Nav | mount | 3071 | 3106 | 1000 | |
| OverflowSet | mount | 1417 | 1428 | 5000 | |
| Panel | mount | 2460 | 2578 | 1000 | |
| Persona | mount | 1303 | 1297 | 1000 | |
| Pivot | mount | 1491 | 1507 | 1000 | |
| PrimaryButton | mount | 1471 | 1478 | 5000 | |
| Rating | mount | 7016 | 7129 | 5000 | |
| SearchBox | mount | 1518 | 1549 | 5000 | |
| Shimmer | mount | 2893 | 2923 | 5000 | |
| Slider | mount | 2119 | 2102 | 5000 | |
| SpinButton | mount | 4280 | 4265 | 5000 | |
| Spinner | mount | 836 | 827 | 5000 | |
| SplitButton | mount | 2872 | 2820 | 5000 | |
| Stack | mount | 865 | 859 | 5000 | |
| StackWithIntrinsicChildren | mount | 2242 | 2285 | 5000 | |
| StackWithTextChildren | mount | 4947 | 4905 | 5000 | |
| SwatchColorPicker | mount | 9420 | 9507 | 5000 | |
| TagPicker | mount | 2317 | 2371 | 5000 | |
| TeachingBubble | mount | 81224 | 82055 | 5000 | |
| Text | mount | 826 | 833 | 5000 | |
| TextField | mount | 1533 | 1555 | 5000 | |
| ThemeProvider | mount | 1472 | 1485 | 5000 | |
| ThemeProvider | virtual-rerender | 1137 | 1159 | 5000 | |
| ThemeProvider | virtual-rerender-with-unmount | 1995 | 2001 | 5000 | |
| Toggle | mount | 1139 | 1146 | 5000 | |
| buttonNative | mount | 543 | 537 | 5000 |
|
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 8dce50f:
|
Mitch-At-Work
force-pushed
the
user/mifraser/list-virtualizer
branch
from
November 30, 2022 17:29
63f8373 to
557c37d
Compare
Mitch-At-Work
marked this pull request as ready for review
November 30, 2022 17:49
Mitch-At-Work
requested review from
a team,
JustSlone and
jurokapsiar
as code owners
November 30, 2022 17:49
Collaborator
🕵 fluentuiv9 No visual regressions between this PR and main |
spmonahan
reviewed
Dec 1, 2022
spmonahan
left a comment
spmonahan
left a comment
Contributor
There was a problem hiding this comment.
I've been working quite a bit with our virtualization implementation in Fluent v8 so it's exciting to see a new implementation using modern browser features like IntersectionObserver.
ling1726
reviewed
Dec 5, 2022
ling1726
reviewed
Dec 5, 2022
ling1726
reviewed
Dec 5, 2022
ling1726
reviewed
Dec 5, 2022
Mitch-At-Work
force-pushed
the
user/mifraser/list-virtualizer
branch
from
December 5, 2022 23:01
e4ecc25 to
0434337
Compare
JustSlone
reviewed
Dec 6, 2022
spmonahan
reviewed
Dec 6, 2022
ling1726
reviewed
Dec 7, 2022
ling1726
reviewed
Dec 7, 2022
behowell
reviewed
Dec 7, 2022
Mitch-At-Work
changed the title
Collaborator
🕵 FluentUI-v0 No visual regressions between this PR and main |
spmonahan
reviewed
Dec 8, 2022
ling1726
reviewed
Jan 17, 2023
ling1726
reviewed
Jan 17, 2023
ling1726
reviewed
Jan 17, 2023
ling1726
reviewed
Jan 17, 2023
ling1726
reviewed
Jan 17, 2023
Mitch-At-Work
force-pushed
the
user/mifraser/list-virtualizer
branch
from
January 17, 2023 21:50
8861cbd to
f3397c1
Compare
fabricteam
reviewed
Jan 17, 2023
Mitch-At-Work
force-pushed
the
user/mifraser/list-virtualizer
branch
from
January 17, 2023 23:45
f3397c1 to
1cb5013
Compare
fabricteam
reviewed
Jan 18, 2023
ling1726
reviewed
Jan 18, 2023
ling1726
reviewed
Jan 18, 2023
ling1726
reviewed
Jan 18, 2023
ling1726
approved these changes
Jan 18, 2023
Mitch-At-Work
force-pushed
the
user/mifraser/list-virtualizer
branch
from
January 18, 2023 17:25
889bd1d to
8dce50f
Compare
Collaborator
🕵 fluentuiv8 No visual regressions between this PR and main |
Comment on lines
+39
to
+42
| "@types/react": ">=16.8.0 <18.0.0", | ||
| "@types/react-dom": ">=16.8.0 <18.0.0", | ||
| "react": ">=16.8.0 <18.0.0", | ||
| "react-dom": ">=16.8.0 <18.0.0" |
Member
There was a problem hiding this comment.
These should be up to 19.0.0
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
9 participants
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.
V9 Virtualizer Draft
masterbranchyarn changelocallyCurrent Behavior
Currently, Virtualization is provided by several OSS libraries that enable scroll detection and positioning of components, these libraries, while excellent, do not adhere to the same design philosophy as V9 in terms of composability and user access.
New Behavior
This Virtualizer is intended to be a composable, generic wrapper for long-length children with minimal DOM changes, it uses the intersection observer library to optimize and remove scroll callback loops and instead only initiate calculations and re-renders when required.
This library can be used vertically or horizontally, in regular or reverse order, is compatible with generic types and a multitude of List, Grid, or Table implementations. If you wish to provide a scroll view, the ref may be passed in to optimize further, however it is not required.
Related Issue(s)
TBD
Fixes #