UnderlinePanels render empty shell during SSR

[joshblack]

When rendering UnderlinePanels in an SSR context, we initially send an empty shell that is then hydrated on the client. For example:

import { UnderlinePanels } from "@primer/react/experimental";

export default function Example() {
  return (
    <main>
      <h1>Example</h1>
      <UnderlinePanels>
        <UnderlinePanels.Tab>Tab one</UnderlinePanels.Tab>
        <UnderlinePanels.Panel>Panel one</UnderlinePanels.Panel>
        <UnderlinePanels.Tab>Tab two</UnderlinePanels.Tab>
        <UnderlinePanels.Panel>Panel two</UnderlinePanels.Panel>
        <UnderlinePanels.Tab>Tab three</UnderlinePanels.Tab>
        <UnderlinePanels.Panel>Panel three</UnderlinePanels.Panel>
      </UnderlinePanels>
    </main>
  );
}

Is initially sending this markup:

<tab-container>
  <nav
    class="prc-components-UnderlineWrapper-oOh5J prc-UnderlinePanels-StyledUnderlineWrapper-DusUj"
    slot="tablist-wrapper"
    data-icons-visible="true"
  >
    <ul class="prc-components-UnderlineItemList-b23Hf" role="tablist"></ul>
  </nav>
</tab-container>

Instead, we should make sure the entire component is rendered to avoid CLS. Support for this could be limited if declarative shadow DOM is not in our browser compat matrix but we could always render and style content until the Shadow DOM is initialized for the component (or move tabs over to React)

Impacted areas

primer-docs, primer-query, github-ui, github