DetailsList's GroupSpacer: Refactor to React.SFC & remove styled HOC to improve render performance

[Kevin T. Coughlin (KevinTCoughlin)]

Pull request checklist

• Addresses an existing issue: Fixes #0000
• Include a change request file using $ npm run change

Description of changes

We can render GroupSpacer less and save row rendering time for DetailsList & GroupedList.

Test Case

Rendering DetailsList.Basic.Example w/ 10,000 rows

Before Changes:

After Changes:

The only time the profiler reports time-spent in GroupSpacer is eval'ing the modules:

What is a GroupSpacer

This space (made blue for snapshot):

Backwards Compatibility

We lose the ability to theme this empty space, but I feel like the performance benefits are worth it.

I explored conditionally rendering the component to preserve backwards-compatibility in 580bb08.

Focus areas to test

• CI should pass
• DetailsList non-grouped should render as expected
• DetailsList grouped should render with indentation as it does on master
• GroupedList should render with indentation as it does on master

Microsoft Reviewers: Open in CodeFlow

[Kevin T. Coughlin (KevinTCoughlin)]

Jason Gore (@JasonGore) may be interested in this perf as it relates to styled-HOC

[size-auditor]

Bundle test	Size (minified)	Diff from master
ShimmeredDetailsList	219.74 kB	-174 bytes
GroupedList	118.838 kB	-175 bytes
DetailsList	208.916 kB	-176 bytes

  Exceeds Tolerance       Exceeds Baseline       Below Baseline     1 kB = 1000 bytes

[Kevin T. Coughlin (KevinTCoughlin)]

Puppeteer would be awesome. This is a great candidate for a test suite, especially with CPU throttling.

[Kevin T. Coughlin (KevinTCoughlin)]

Test Case 2

Results from DetailsList.Basic.Example w/ 1,000 items and virtualization disabled

Before

After

* Run by Kevin-bot 😆

Note: I tried 10,000 items with virtualization disabled, but my browser broke.

[Vitalie Braga (Vitalius1)]

I like the change. The only thing I am worried about is that we lost a simple way to fluentize this part in fluent-theme package through Customizer with the scope name (the width changes in fluent styles), but I think it's worth it as I don't need it for fabric-7 branch.

[Kevin T. Coughlin (KevinTCoughlin)]

FWIW this customization hook for GroupSpacer is unused across OneDrive / SharePoint

[Kevin T. Coughlin (KevinTCoughlin)]

Test Case 3

Results from GroupedList.Basic.Example w/ 3 groups of depth 3 and virtualization enabled (defaults).

Before

After

I tried larger variants of the GroupedList, but they were mostly unusable ☹️.

[msft-github-bot]

🎉office-ui-fabric-react@v6.160.0 has been released which incorporates this pull request.:tada:

Handy links:

• Release Notes
• Official NPM Release
• Test the release with Developer Demo Site