search

microsoft / fluent-ui-react

An ecosystem for building highly customizable enterprise class user interfaces.
https://aka.ms/fluent-ui
MIT License
433 stars 54 forks source link

fix(Loader): Adding labeling when loader get focus #2352

Closed kolaps33 closed 4 years ago

kolaps33 commented 4 years ago

Fixing the ticket: https://github.com/microsoft/fluent-ui-react/issues/2254

DustyTheBot commented 4 years ago

Perf comparison

Status Scenario Fluent TPI Fabric TPI Ratio Iterations Ticks
🔧 Avatar.Fluent 0.5 0.4 1.25:1 2000 1002
🦄 Button.Fluent 0.11 0.17 0.65:1 1000 113
🔧 Checkbox.Fluent 0.83 0.27 3.07:1 1000 826
🔧 Dialog.Fluent 0.34 0.17 2:1 5000 1704
🔧 Dropdown.Fluent 3.71 0.37 10.03:1 1000 3707
🔧 Icon.Fluent 0.12 0.03 4:1 5000 624
🦄 Image.Fluent 0.04 0.07 0.57:1 5000 224
🔧 Slider.Fluent 1.68 0.31 5.42:1 1000 1679
🔧 Text.Fluent 0.06 0.02 3:1 5000 295
🦄 Tooltip.Fluent 0.12 18.34 0.01:1 5000 582

🔧 Needs work     🎯 On target     🦄 Amazing

Perf tests with no regressions Scenario | Current PR Ticks | Baseline Ticks | Ratio :--- | ---:| ---:| ---: ChatDuplicateMessagesPerf.default | [807](https://23039-141743704-gh.circle-artifacts.com/0/artifacts/perf/ChatDuplicateMessagesPerf.default.html) | [634](https://23039-141743704-gh.circle-artifacts.com/0/artifacts/perf/ChatDuplicateMessagesPerf.default_base.html) | 1.27:1 RefMinimalPerf.default | [177](https://23039-141743704-gh.circle-artifacts.com/0/artifacts/perf/RefMinimalPerf.default.html) | [139](https://23039-141743704-gh.circle-artifacts.com/0/artifacts/perf/RefMinimalPerf.default_base.html) | 1.27:1 AccordionMinimalPerf.default | [240](https://23039-141743704-gh.circle-artifacts.com/0/artifacts/perf/AccordionMinimalPerf.default.html) | [202](https://23039-141743704-gh.circle-artifacts.com/0/artifacts/perf/AccordionMinimalPerf.default_base.html) | 1.19:1 ButtonMinimalPerf.default | [135](https://23039-141743704-gh.circle-artifacts.com/0/artifacts/perf/ButtonMinimalPerf.default.html) | [113](https://23039-141743704-gh.circle-artifacts.com/0/artifacts/perf/ButtonMinimalPerf.default_base.html) | 1.19:1 DropdownManyItemsPerf.default | [551](https://23039-141743704-gh.circle-artifacts.com/0/artifacts/perf/DropdownManyItemsPerf.default.html) | [464](https://23039-141743704-gh.circle-artifacts.com/0/artifacts/perf/DropdownManyItemsPerf.default_base.html) | 1.19:1 GridMinimalPerf.default | [941](https://23039-141743704-gh.circle-artifacts.com/0/artifacts/perf/GridMinimalPerf.default.html) | [806](https://23039-141743704-gh.circle-artifacts.com/0/artifacts/perf/GridMinimalPerf.default_base.html) | 1.17:1 CheckboxMinimalPerf.default | [4081](https://23039-141743704-gh.circle-artifacts.com/0/artifacts/perf/CheckboxMinimalPerf.default.html) | [3513](https://23039-141743704-gh.circle-artifacts.com/0/artifacts/perf/CheckboxMinimalPerf.default_base.html) | 1.16:1 Text.Fluent | [295](https://23039-141743704-gh.circle-artifacts.com/0/artifacts/perf/Text.Fluent.html) | [256](https://23039-141743704-gh.circle-artifacts.com/0/artifacts/perf/Text.Fluent_base.html) | 1.15:1 StatusMinimalPerf.default | [262](https://23039-141743704-gh.circle-artifacts.com/0/artifacts/perf/StatusMinimalPerf.default.html) | [230](https://23039-141743704-gh.circle-artifacts.com/0/artifacts/perf/StatusMinimalPerf.default_base.html) | 1.14:1 ListMinimalPerf.default | [299](https://23039-141743704-gh.circle-artifacts.com/0/artifacts/perf/ListMinimalPerf.default.html) | [265](https://23039-141743704-gh.circle-artifacts.com/0/artifacts/perf/ListMinimalPerf.default_base.html) | 1.13:1 AnimationMinimalPerf.default | [529](https://23039-141743704-gh.circle-artifacts.com/0/artifacts/perf/AnimationMinimalPerf.default.html) | [474](https://23039-141743704-gh.circle-artifacts.com/0/artifacts/perf/AnimationMinimalPerf.default_base.html) | 1.12:1 DropdownMinimalPerf.default | [3851](https://23039-141743704-gh.circle-artifacts.com/0/artifacts/perf/DropdownMinimalPerf.default.html) | [3424](https://23039-141743704-gh.circle-artifacts.com/0/artifacts/perf/DropdownMinimalPerf.default_base.html) | 1.12:1 ListCommonPerf.default | [171](https://23039-141743704-gh.circle-artifacts.com/0/artifacts/perf/ListCommonPerf.default.html) | [156](https://23039-141743704-gh.circle-artifacts.com/0/artifacts/perf/ListCommonPerf.default_base.html) | 1.1:1 AvatarMinimalPerf.default | [546](https://23039-141743704-gh.circle-artifacts.com/0/artifacts/perf/AvatarMinimalPerf.default.html) | [505](https://23039-141743704-gh.circle-artifacts.com/0/artifacts/perf/AvatarMinimalPerf.default_base.html) | 1.08:1 BoxMinimalPerf.default | [253](https://23039-141743704-gh.circle-artifacts.com/0/artifacts/perf/BoxMinimalPerf.default.html) | [235](https://23039-141743704-gh.circle-artifacts.com/0/artifacts/perf/BoxMinimalPerf.default_base.html) | 1.08:1 ChatWithPopoverPerf.default | [724](https://23039-141743704-gh.circle-artifacts.com/0/artifacts/perf/ChatWithPopoverPerf.default.html) | [689](https://23039-141743704-gh.circle-artifacts.com/0/artifacts/perf/ChatWithPopoverPerf.default_base.html) | 1.05:1 ItemLayoutMinimalPerf.default | [1770](https://23039-141743704-gh.circle-artifacts.com/0/artifacts/perf/ItemLayoutMinimalPerf.default.html) | [1691](https://23039-141743704-gh.circle-artifacts.com/0/artifacts/perf/ItemLayoutMinimalPerf.default_base.html) | 1.05:1 RadioGroupMinimalPerf.default | [421](https://23039-141743704-gh.circle-artifacts.com/0/artifacts/perf/RadioGroupMinimalPerf.default.html) | [400](https://23039-141743704-gh.circle-artifacts.com/0/artifacts/perf/RadioGroupMinimalPerf.default_base.html) | 1.05:1 Icon.Fluent | [624](https://23039-141743704-gh.circle-artifacts.com/0/artifacts/perf/Icon.Fluent.html) | [596](https://23039-141743704-gh.circle-artifacts.com/0/artifacts/perf/Icon.Fluent_base.html) | 1.05:1 Button.Fluent | [113](https://23039-141743704-gh.circle-artifacts.com/0/artifacts/perf/Button.Fluent.html) | [109](https://23039-141743704-gh.circle-artifacts.com/0/artifacts/perf/Button.Fluent_base.html) | 1.04:1 Dialog.Fluent | [1704](https://23039-141743704-gh.circle-artifacts.com/0/artifacts/perf/Dialog.Fluent.html) | [1636](https://23039-141743704-gh.circle-artifacts.com/0/artifacts/perf/Dialog.Fluent_base.html) | 1.04:1 DialogMinimalPerf.default | [1650](https://23039-141743704-gh.circle-artifacts.com/0/artifacts/perf/DialogMinimalPerf.default.html) | [1596](https://23039-141743704-gh.circle-artifacts.com/0/artifacts/perf/DialogMinimalPerf.default_base.html) | 1.03:1 LayoutMinimalPerf.default | [514](https://23039-141743704-gh.circle-artifacts.com/0/artifacts/perf/LayoutMinimalPerf.default.html) | [500](https://23039-141743704-gh.circle-artifacts.com/0/artifacts/perf/LayoutMinimalPerf.default_base.html) | 1.03:1 TextAreaMinimalPerf.default | [2986](https://23039-141743704-gh.circle-artifacts.com/0/artifacts/perf/TextAreaMinimalPerf.default.html) | [2910](https://23039-141743704-gh.circle-artifacts.com/0/artifacts/perf/TextAreaMinimalPerf.default_base.html) | 1.03:1 Tree60WithListItems.default | [235](https://23039-141743704-gh.circle-artifacts.com/0/artifacts/perf/Tree60WithListItems.default.html) | [229](https://23039-141743704-gh.circle-artifacts.com/0/artifacts/perf/Tree60WithListItems.default_base.html) | 1.03:1 ChatMinimalPerf.default | [1918](https://23039-141743704-gh.circle-artifacts.com/0/artifacts/perf/ChatMinimalPerf.default.html) | [1889](https://23039-141743704-gh.circle-artifacts.com/0/artifacts/perf/ChatMinimalPerf.default_base.html) | 1.02:1 FlexMinimalPerf.default | [356](https://23039-141743704-gh.circle-artifacts.com/0/artifacts/perf/FlexMinimalPerf.default.html) | [350](https://23039-141743704-gh.circle-artifacts.com/0/artifacts/perf/FlexMinimalPerf.default_base.html) | 1.02:1 PopupMinimalPerf.default | [316](https://23039-141743704-gh.circle-artifacts.com/0/artifacts/perf/PopupMinimalPerf.default.html) | [310](https://23039-141743704-gh.circle-artifacts.com/0/artifacts/perf/PopupMinimalPerf.default_base.html) | 1.02:1 SliderMinimalPerf.default | [1410](https://23039-141743704-gh.circle-artifacts.com/0/artifacts/perf/SliderMinimalPerf.default.html) | [1380](https://23039-141743704-gh.circle-artifacts.com/0/artifacts/perf/SliderMinimalPerf.default_base.html) | 1.02:1 CarouselMinimalPerf.default | [1909](https://23039-141743704-gh.circle-artifacts.com/0/artifacts/perf/CarouselMinimalPerf.default.html) | [1883](https://23039-141743704-gh.circle-artifacts.com/0/artifacts/perf/CarouselMinimalPerf.default_base.html) | 1.01:1 HeaderSlotsPerf.default | [1313](https://23039-141743704-gh.circle-artifacts.com/0/artifacts/perf/HeaderSlotsPerf.default.html) | [1294](https://23039-141743704-gh.circle-artifacts.com/0/artifacts/perf/HeaderSlotsPerf.default_base.html) | 1.01:1 LoaderMinimalPerf.default | [2346](https://23039-141743704-gh.circle-artifacts.com/0/artifacts/perf/LoaderMinimalPerf.default.html) | [2319](https://23039-141743704-gh.circle-artifacts.com/0/artifacts/perf/LoaderMinimalPerf.default_base.html) | 1.01:1 TextMinimalPerf.default | [259](https://23039-141743704-gh.circle-artifacts.com/0/artifacts/perf/TextMinimalPerf.default.html) | [257](https://23039-141743704-gh.circle-artifacts.com/0/artifacts/perf/TextMinimalPerf.default_base.html) | 1.01:1 Avatar.Fluent | [1002](https://23039-141743704-gh.circle-artifacts.com/0/artifacts/perf/Avatar.Fluent.html) | [995](https://23039-141743704-gh.circle-artifacts.com/0/artifacts/perf/Avatar.Fluent_base.html) | 1.01:1 Checkbox.Fluent | [826](https://23039-141743704-gh.circle-artifacts.com/0/artifacts/perf/Checkbox.Fluent.html) | [817](https://23039-141743704-gh.circle-artifacts.com/0/artifacts/perf/Checkbox.Fluent_base.html) | 1.01:1 HeaderMinimalPerf.default | [421](https://23039-141743704-gh.circle-artifacts.com/0/artifacts/perf/HeaderMinimalPerf.default.html) | [423](https://23039-141743704-gh.circle-artifacts.com/0/artifacts/perf/HeaderMinimalPerf.default_base.html) | 1:1 PortalMinimalPerf.default | [217](https://23039-141743704-gh.circle-artifacts.com/0/artifacts/perf/PortalMinimalPerf.default.html) | [218](https://23039-141743704-gh.circle-artifacts.com/0/artifacts/perf/PortalMinimalPerf.default_base.html) | 1:1 ReactionMinimalPerf.default | [2492](https://23039-141743704-gh.circle-artifacts.com/0/artifacts/perf/ReactionMinimalPerf.default.html) | [2487](https://23039-141743704-gh.circle-artifacts.com/0/artifacts/perf/ReactionMinimalPerf.default_base.html) | 1:1 TableMinimalPerf.default | [555](https://23039-141743704-gh.circle-artifacts.com/0/artifacts/perf/TableMinimalPerf.default.html) | [556](https://23039-141743704-gh.circle-artifacts.com/0/artifacts/perf/TableMinimalPerf.default_base.html) | 1:1 TreeMinimalPerf.default | [903](https://23039-141743704-gh.circle-artifacts.com/0/artifacts/perf/TreeMinimalPerf.default.html) | [907](https://23039-141743704-gh.circle-artifacts.com/0/artifacts/perf/TreeMinimalPerf.default_base.html) | 1:1 VideoMinimalPerf.default | [689](https://23039-141743704-gh.circle-artifacts.com/0/artifacts/perf/VideoMinimalPerf.default.html) | [691](https://23039-141743704-gh.circle-artifacts.com/0/artifacts/perf/VideoMinimalPerf.default_base.html) | 1:1 MenuMinimalPerf.default | [1811](https://23039-141743704-gh.circle-artifacts.com/0/artifacts/perf/MenuMinimalPerf.default.html) | [1830](https://23039-141743704-gh.circle-artifacts.com/0/artifacts/perf/MenuMinimalPerf.default_base.html) | 0.99:1 ProviderMinimalPerf.default | [569](https://23039-141743704-gh.circle-artifacts.com/0/artifacts/perf/ProviderMinimalPerf.default.html) | [572](https://23039-141743704-gh.circle-artifacts.com/0/artifacts/perf/ProviderMinimalPerf.default_base.html) | 0.99:1 SplitButtonMinimalPerf.default | [11814](https://23039-141743704-gh.circle-artifacts.com/0/artifacts/perf/SplitButtonMinimalPerf.default.html) | [11900](https://23039-141743704-gh.circle-artifacts.com/0/artifacts/perf/SplitButtonMinimalPerf.default_base.html) | 0.99:1 ToolbarMinimalPerf.default | [735](https://23039-141743704-gh.circle-artifacts.com/0/artifacts/perf/ToolbarMinimalPerf.default.html) | [741](https://23039-141743704-gh.circle-artifacts.com/0/artifacts/perf/ToolbarMinimalPerf.default_base.html) | 0.99:1 AttachmentSlotsPerf.default | [3304](https://23039-141743704-gh.circle-artifacts.com/0/artifacts/perf/AttachmentSlotsPerf.default.html) | [3384](https://23039-141743704-gh.circle-artifacts.com/0/artifacts/perf/AttachmentSlotsPerf.default_base.html) | 0.98:1 ButtonSlotsPerf.default | [594](https://23039-141743704-gh.circle-artifacts.com/0/artifacts/perf/ButtonSlotsPerf.default.html) | [609](https://23039-141743704-gh.circle-artifacts.com/0/artifacts/perf/ButtonSlotsPerf.default_base.html) | 0.98:1 InputMinimalPerf.default | [906](https://23039-141743704-gh.circle-artifacts.com/0/artifacts/perf/InputMinimalPerf.default.html) | [926](https://23039-141743704-gh.circle-artifacts.com/0/artifacts/perf/InputMinimalPerf.default_base.html) | 0.98:1 TooltipMinimalPerf.default | [833](https://23039-141743704-gh.circle-artifacts.com/0/artifacts/perf/TooltipMinimalPerf.default.html) | [848](https://23039-141743704-gh.circle-artifacts.com/0/artifacts/perf/TooltipMinimalPerf.default_base.html) | 0.98:1 AttachmentMinimalPerf.default | [876](https://23039-141743704-gh.circle-artifacts.com/0/artifacts/perf/AttachmentMinimalPerf.default.html) | [907](https://23039-141743704-gh.circle-artifacts.com/0/artifacts/perf/AttachmentMinimalPerf.default_base.html) | 0.97:1 EmbedMinimalPerf.default | [5988](https://23039-141743704-gh.circle-artifacts.com/0/artifacts/perf/EmbedMinimalPerf.default.html) | [6163](https://23039-141743704-gh.circle-artifacts.com/0/artifacts/perf/EmbedMinimalPerf.default_base.html) | 0.97:1 Dropdown.Fluent | [3707](https://23039-141743704-gh.circle-artifacts.com/0/artifacts/perf/Dropdown.Fluent.html) | [3829](https://23039-141743704-gh.circle-artifacts.com/0/artifacts/perf/Dropdown.Fluent_base.html) | 0.97:1 IconMinimalPerf.default | [302](https://23039-141743704-gh.circle-artifacts.com/0/artifacts/perf/IconMinimalPerf.default.html) | [316](https://23039-141743704-gh.circle-artifacts.com/0/artifacts/perf/IconMinimalPerf.default_base.html) | 0.96:1 ProviderMergeThemesPerf.default | [1027](https://23039-141743704-gh.circle-artifacts.com/0/artifacts/perf/ProviderMergeThemesPerf.default.html) | [1075](https://23039-141743704-gh.circle-artifacts.com/0/artifacts/perf/ProviderMergeThemesPerf.default_base.html) | 0.96:1 ImageMinimalPerf.default | [209](https://23039-141743704-gh.circle-artifacts.com/0/artifacts/perf/ImageMinimalPerf.default.html) | [219](https://23039-141743704-gh.circle-artifacts.com/0/artifacts/perf/ImageMinimalPerf.default_base.html) | 0.95:1 MenuButtonMinimalPerf.default | [1404](https://23039-141743704-gh.circle-artifacts.com/0/artifacts/perf/MenuButtonMinimalPerf.default.html) | [1479](https://23039-141743704-gh.circle-artifacts.com/0/artifacts/perf/MenuButtonMinimalPerf.default_base.html) | 0.95:1 CustomToolbarPrototype.default | [3775](https://23039-141743704-gh.circle-artifacts.com/0/artifacts/perf/CustomToolbarPrototype.default.html) | [3957](https://23039-141743704-gh.circle-artifacts.com/0/artifacts/perf/CustomToolbarPrototype.default_base.html) | 0.95:1 Image.Fluent | [224](https://23039-141743704-gh.circle-artifacts.com/0/artifacts/perf/Image.Fluent.html) | [235](https://23039-141743704-gh.circle-artifacts.com/0/artifacts/perf/Image.Fluent_base.html) | 0.95:1 HierarchicalTreeMinimalPerf.default | [764](https://23039-141743704-gh.circle-artifacts.com/0/artifacts/perf/HierarchicalTreeMinimalPerf.default.html) | [814](https://23039-141743704-gh.circle-artifacts.com/0/artifacts/perf/HierarchicalTreeMinimalPerf.default_base.html) | 0.94:1 LabelMinimalPerf.default | [774](https://23039-141743704-gh.circle-artifacts.com/0/artifacts/perf/LabelMinimalPerf.default.html) | [835](https://23039-141743704-gh.circle-artifacts.com/0/artifacts/perf/LabelMinimalPerf.default_base.html) | 0.93:1 Slider.Fluent | [1679](https://23039-141743704-gh.circle-artifacts.com/0/artifacts/perf/Slider.Fluent.html) | [1821](https://23039-141743704-gh.circle-artifacts.com/0/artifacts/perf/Slider.Fluent_base.html) | 0.92:1 Tooltip.Fluent | [582](https://23039-141743704-gh.circle-artifacts.com/0/artifacts/perf/Tooltip.Fluent.html) | [631](https://23039-141743704-gh.circle-artifacts.com/0/artifacts/perf/Tooltip.Fluent_base.html) | 0.92:1 AlertMinimalPerf.default | [536](https://23039-141743704-gh.circle-artifacts.com/0/artifacts/perf/AlertMinimalPerf.default.html) | [596](https://23039-141743704-gh.circle-artifacts.com/0/artifacts/perf/AlertMinimalPerf.default_base.html) | 0.9:1 SegmentMinimalPerf.default | [1194](https://23039-141743704-gh.circle-artifacts.com/0/artifacts/perf/SegmentMinimalPerf.default.html) | [1347](https://23039-141743704-gh.circle-artifacts.com/0/artifacts/perf/SegmentMinimalPerf.default_base.html) | 0.89:1 DividerMinimalPerf.default | [915](https://23039-141743704-gh.circle-artifacts.com/0/artifacts/perf/DividerMinimalPerf.default.html) | [1051](https://23039-141743704-gh.circle-artifacts.com/0/artifacts/perf/DividerMinimalPerf.default_base.html) | 0.87:1 FormMinimalPerf.default | [759](https://23039-141743704-gh.circle-artifacts.com/0/artifacts/perf/FormMinimalPerf.default.html) | [947](https://23039-141743704-gh.circle-artifacts.com/0/artifacts/perf/FormMinimalPerf.default_base.html) | 0.8:1

Generated by :no_entry_sign: dangerJS