[Batch] Improve slots implementation in PRC to enable React SSR compatibility & performance gain

[siddharthkp]

Background

The current slot implementation isn't compatible with server-side rendering (SSR). It only renders the freeform main slot on the server and then adds other slots after mounting on the client (with useEffect) which is not a problem in client-only components like Overlay but can be a bad loading experience for other components with layout shift.

The tradeoffs considered at the time of building this component are mentioned in this comment: https://github.com/github/primer/issues/1224#issuecomment-1222450075

Task

Update the slots implementation to render consistently across the server and client. This will introduce a limitation that a slot needs to be a direct child of the slot container, deep nesting is not allowed.

Components to migrate

• PageLayout: Use SSR-compatible slot implementation in PageLayout #3036
• TreeView: Use SSR-compatible slot implementation in TreeView #3097
• CheckboxGroup: Use SSR-compatible slot implementation in CheckboxGroup/RadioGroup #3146
• RadioGroup: Use SSR-compatible slot implementation in CheckboxGroup/RadioGroup #3146
• FormControl Use SSR-compatible slot implementation in FormControl #3149
• ActionList Use SSR-compatible slot implementation in ActionList/NavList #3173
• NavList Use SSR-compatible slot implementation in ActionList/NavList #3173
• MarkdownEditor (draft) Use SSR-compatible slot implementation in MarkdownEditor #3174 https://github.com/github/primer/issues/2090

Related work

• https://github.com/github/primer/issues/1936

Clean up

• Remove legacy slots implementation Deprecate legacy slots implementation #3205

[lesliecdubs]

We probably want to pick this one up when we work on Navigation List https://github.com/github/primer/issues/637.

[siddharthkp]

Another use case for this (without SSR) - https://github.com/orgs/github/issues/issues (behind feature flag)

Screen.Recording.2022-07-25.at.10.19.03.online-video-cutter.com.1.mp4

As a stop gap, we moved the contents of leading visual inside text

[siddharthkp]

Another example where this falls short: https://github.com/github/primer/issues/1224