STCOM-1533 Improve performance on pane resizing.

[JohnC-80]

Data-heavy, component-heavy views can cause some pane-resizing jank. This PR works to help Paneset's end of the deal and not add more jank due to its implementation.

Draft for now with the end of the Spike. Ready after a bit more sleuthing for jank-culprits.

So far:

• Swapped <Paneset>'s setStyle to a noop - it's only there to fulfill Paneset's own expectation when treating a nested Paneset. This avoids getBoundingClientRect.
• moved handle position computation *out of the standard render process, so it only updates when resize, blocking status, new panes, etc and not when the handle is being dragged.

[github-actions]

Bigtest Unit Test Results

    1 files  ±0      1 suites  ±0   24s ⏱️ -1s
1 637 tests ±0  1 629 ✅ ±0  8 💤 ±0  0 ❌ ±0 
1 638 runs  ±0  1 630 ✅ ±0  8 💤 ±0  0 ❌ ±0 

Results for commit b3f7088. ± Comparison against base commit 9f214e6.

This pull request removes 1637 and adds 1637 tests. Note that renamed tests count towards both.

Chrome_150_0_0_0_(Linux_0_0_0).Accordion - as part of an AccordionSet contents ready for interaction following open ‑ Accordion - as part of an AccordionSet contents ready for interaction following open Child element was filled out successfully
Chrome_150_0_0_0_(Linux_0_0_0).Accordion - as part of an AccordionSet keyboard navigation: first accordion ‑ Accordion - as part of an AccordionSet keyboard navigation: first accordion First accordion is in focus
Chrome_150_0_0_0_(Linux_0_0_0).Accordion - as part of an AccordionSet keyboard navigation: last accordion ‑ Accordion - as part of an AccordionSet keyboard navigation: last accordion Last accordion is in focus
Chrome_150_0_0_0_(Linux_0_0_0).Accordion - as part of an AccordionSet keyboard navigation: next accordion ‑ Accordion - as part of an AccordionSet keyboard navigation: next accordion second accordion is in focus
Chrome_150_0_0_0_(Linux_0_0_0).Accordion - as part of an AccordionSet keyboard navigation: previous accordion ‑ Accordion - as part of an AccordionSet keyboard navigation: previous accordion first accordion is in focus
Chrome_150_0_0_0_(Linux_0_0_0).Accordion - as part of an AccordionSet ‑ Accordion - as part of an AccordionSet has a button
Chrome_150_0_0_0_(Linux_0_0_0).Accordion - as part of an AccordionSet ‑ Accordion - as part of an AccordionSet has no axe errors
Chrome_150_0_0_0_(Linux_0_0_0).Accordion - as part of an AccordionSet ‑ Accordion - as part of an AccordionSet should call onRegisterAccordion callback
Chrome_150_0_0_0_(Linux_0_0_0).Accordion - updating state of parent component opening the closed accordion changing the text value/parent state ‑ Accordion - updating state of parent component opening the closed accordion changing the text value/parent state renders second accordion as open
Chrome_150_0_0_0_(Linux_0_0_0).Accordion - updating state of parent component opening the closed accordion changing the text value/parent state ‑ Accordion - updating state of parent component opening the closed accordion changing the text value/parent state renders state value in textField
…

Chrome_151_0_0_0_(Linux_0_0_0).Accordion - as part of an AccordionSet contents ready for interaction following open ‑ Accordion - as part of an AccordionSet contents ready for interaction following open Child element was filled out successfully
Chrome_151_0_0_0_(Linux_0_0_0).Accordion - as part of an AccordionSet keyboard navigation: first accordion ‑ Accordion - as part of an AccordionSet keyboard navigation: first accordion First accordion is in focus
Chrome_151_0_0_0_(Linux_0_0_0).Accordion - as part of an AccordionSet keyboard navigation: last accordion ‑ Accordion - as part of an AccordionSet keyboard navigation: last accordion Last accordion is in focus
Chrome_151_0_0_0_(Linux_0_0_0).Accordion - as part of an AccordionSet keyboard navigation: next accordion ‑ Accordion - as part of an AccordionSet keyboard navigation: next accordion second accordion is in focus
Chrome_151_0_0_0_(Linux_0_0_0).Accordion - as part of an AccordionSet keyboard navigation: previous accordion ‑ Accordion - as part of an AccordionSet keyboard navigation: previous accordion first accordion is in focus
Chrome_151_0_0_0_(Linux_0_0_0).Accordion - as part of an AccordionSet ‑ Accordion - as part of an AccordionSet has a button
Chrome_151_0_0_0_(Linux_0_0_0).Accordion - as part of an AccordionSet ‑ Accordion - as part of an AccordionSet has no axe errors
Chrome_151_0_0_0_(Linux_0_0_0).Accordion - as part of an AccordionSet ‑ Accordion - as part of an AccordionSet should call onRegisterAccordion callback
Chrome_151_0_0_0_(Linux_0_0_0).Accordion - updating state of parent component opening the closed accordion changing the text value/parent state ‑ Accordion - updating state of parent component opening the closed accordion changing the text value/parent state renders second accordion as open
Chrome_151_0_0_0_(Linux_0_0_0).Accordion - updating state of parent component opening the closed accordion changing the text value/parent state ‑ Accordion - updating state of parent component opening the closed accordion changing the text value/parent state renders state value in textField
…

This pull request removes 8 skipped tests and adds 8 skipped tests. Note that renamed tests count towards both.

Chrome_150_0_0_0_(Linux_0_0_0).Datepicker defaultOutputFormatter converts non-Latn input to Latn-output ‑ Datepicker defaultOutputFormatter converts non-Latn input to Latn-output returns a Latn (Arabic, 0-9) string
Chrome_150_0_0_0_(Linux_0_0_0).Datepicker with Redux Form integration exclude prop selecting excluded date navigation on excluded date ‑ Datepicker with Redux Form integration exclude prop selecting excluded date navigation on excluded date changed cursor to April 2, 2018
Chrome_150_0_0_0_(Linux_0_0_0).Editor rendering a basic Editor ‑ Editor rendering a basic Editor has no axe errors. - Editor
Chrome_150_0_0_0_(Linux_0_0_0).Popover If the legacy component API is used When the toggle is clicked again ‑ Popover If the legacy component API is used When the toggle is clicked again Hides the popover overlay
Chrome_150_0_0_0_(Linux_0_0_0).Popover If the legacy component API is used ‑ Popover If the legacy component API is used Renders the legacy popover and opens the overlay when the toggle is clicked
Chrome_150_0_0_0_(Linux_0_0_0).childrenOf propType validator Passing a type that isn't allowed ‑ childrenOf propType validator Passing a type that isn't allowed triggers a propType error
Chrome_150_0_0_0_(Linux_0_0_0).childrenOf propType validator Passing a type that isn't allowed ‑ childrenOf propType validator Passing a type that isn't allowed triggers no proptype error
Chrome_150_0_0_0_(Linux_0_0_0).childrenOf propType validator not providing a required prop ‑ childrenOf propType validator not providing a required prop triggers a required propType error

Chrome_151_0_0_0_(Linux_0_0_0).Datepicker defaultOutputFormatter converts non-Latn input to Latn-output ‑ Datepicker defaultOutputFormatter converts non-Latn input to Latn-output returns a Latn (Arabic, 0-9) string
Chrome_151_0_0_0_(Linux_0_0_0).Datepicker with Redux Form integration exclude prop selecting excluded date navigation on excluded date ‑ Datepicker with Redux Form integration exclude prop selecting excluded date navigation on excluded date changed cursor to April 2, 2018
Chrome_151_0_0_0_(Linux_0_0_0).Editor rendering a basic Editor ‑ Editor rendering a basic Editor has no axe errors. - Editor
Chrome_151_0_0_0_(Linux_0_0_0).Popover If the legacy component API is used When the toggle is clicked again ‑ Popover If the legacy component API is used When the toggle is clicked again Hides the popover overlay
Chrome_151_0_0_0_(Linux_0_0_0).Popover If the legacy component API is used ‑ Popover If the legacy component API is used Renders the legacy popover and opens the overlay when the toggle is clicked
Chrome_151_0_0_0_(Linux_0_0_0).childrenOf propType validator Passing a type that isn't allowed ‑ childrenOf propType validator Passing a type that isn't allowed triggers a propType error
Chrome_151_0_0_0_(Linux_0_0_0).childrenOf propType validator Passing a type that isn't allowed ‑ childrenOf propType validator Passing a type that isn't allowed triggers no proptype error
Chrome_151_0_0_0_(Linux_0_0_0).childrenOf propType validator not providing a required prop ‑ childrenOf propType validator not providing a required prop triggers a required propType error

♻️ This comment has been updated with latest results.

[sonarqubecloud]

Quality Gate passed

Issues
1 New issue
0 Accepted issues

Measures
0 Security Hotspots
87.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[zburke]

Maybe a stronger way to write this is to check for the conditions you need, else return null?

if (pos?.render) { return <PaneResizeHandle ...> }
return null;

or

return (pos?.render) ? <PaneResizeHandle ...> : null;