feat(site): a few loading optimizations (#193)

This commit is contained in:
Darius Cepulis
2025-11-18 11:25:47 -06:00
committed by GitHub
parent ec700e5ebd
commit 5a449832fd
20 changed files with 163 additions and 160 deletions
@@ -25,38 +25,38 @@ import { TabsRoot, TabsList, TabsPanel, Tab } from '@/components/Tabs';
## Example
<FrameworkCase frameworks={["react"]}>
<TabsRoot client:load>
<TabsList client:load label="React implementation">
<Tab client:load value="component" initial>Component</Tab>
<Tab client:load value="css">CSS Module</Tab>
<TabsRoot client:visible>
<TabsList client:visible label="React implementation">
<Tab client:visible value="component" initial>Component</Tab>
<Tab client:visible value="css">CSS Module</Tab>
</TabsList>
<TabsPanel client:load value="component" initial>
<TabsPanel client:visible value="component" initial>
<ServerCode code={componentModuleStr} lang="tsx" />
</TabsPanel>
<TabsPanel client:load value="css">
<TabsPanel client:visible value="css">
<ServerCode code={cssModuleStr} lang="css" />
</TabsPanel>
<FullscreenButtonDemo client:load />
<FullscreenButtonDemo client:visible />
</TabsRoot>
</FrameworkCase>
<FrameworkCase frameworks={["html"]}>
<TabsRoot client:load>
<TabsList client:load label="HTML implementation">
<Tab client:load value="html" initial>HTML</Tab>
<Tab client:load value="css">CSS</Tab>
<Tab client:load value="javascript">JS</Tab>
<TabsRoot client:visible>
<TabsList client:visible label="HTML implementation">
<Tab client:visible value="html" initial>HTML</Tab>
<Tab client:visible value="css">CSS</Tab>
<Tab client:visible value="javascript">JS</Tab>
</TabsList>
<TabsPanel client:load value="html" initial>
<TabsPanel client:visible value="html" initial>
<ServerCode code={htmlStr} lang="html" />
</TabsPanel>
<TabsPanel client:load value="css">
<TabsPanel client:visible value="css">
<ServerCode code={htmlCssStr} lang="css" />
</TabsPanel>
<TabsPanel client:load value="javascript">
<TabsPanel client:visible value="javascript">
<ServerCode code={htmlJsStr} lang="js" />
</TabsPanel>
<FullscreenButtonDemo client:load />
<FullscreenButtonDemo client:visible />
</TabsRoot>
</FrameworkCase>