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

site/src/components/Code/ClientCode.tsx

@@ -15,7 +15,7 @@ const clientHighlighter = await createHighlighter({
 /**
  * Renders HTML, TSX, CSS, and JavaScript. A strict subset, for lighter-weight client shipping
  *
- * Renders with top-level await, so, it's safe for ssr (client:idle or client:load)
+ * Renders with top-level await, so, it's safe for ssr (client:idle or client:load or client:visible)
  * However, if you try importing more than one island with ClientCode in it,
  * Safari MAY throw a hydration error because of this top-level await.
  * https://github.com/withastro/astro/issues/10055

site/src/components/Footer.astro

@@ -62,7 +62,7 @@ const { class: className } = Astro.props;
         </a>
       </div>
     </nav>
-    <ThemeToggle client:idle />
+    <ThemeToggle client:visible />
   </div>
 
   <p class="text-sm text-center sm:text-left text-dark-40 dark:text-light-40 px-3">

site/src/components/NavBar/NavBar.astro

@@ -83,7 +83,7 @@ const { class: className, dark = false } = Astro.props;
   </div>
 
   {/* Mobile nav */}
-  <MobileNav client:load navLinks={navLinks} currentPath={currentPath} dark={dark}>
+  <MobileNav client:idle navLinks={navLinks} currentPath={currentPath} dark={dark}>
     <slot name="mobile-nav" />
   </MobileNav>
 </nav>

site/src/components/docs/FrameworkCase.astro

@@ -20,7 +20,7 @@ const shouldRender = !frameworks || frameworks.includes(framework as SupportedFr
     ```
 
     But I'm running into some crazy problems with hydration.
-    Putting client:load in one of these conditionals causes Astro to just give up hydrating the whole app for some reason.
+    Putting client:* in one of these conditionals causes Astro to just give up hydrating the whole app for some reason.
     TODO: fix this
 
     So, while I debug those... let's do this

site/src/components/frames/Minimal.astro

@@ -12,7 +12,7 @@ import { twMerge } from 'tailwind-merge';
  * import Minimal from '@/components/frames/Minimal.astro';
  *
  * <MinimalFrame>
- *   <MyDemo client:load />
+ *   <MyDemo client:visible />
  * </MinimalFrame>
  * ```
  */

site/src/components/home/HeroVideo.tsx

@@ -6,7 +6,6 @@ import '@videojs/react/skins/frosted.css';
 import '@videojs/react/skins/minimal.css';
 
 export default function HeroVideo({ className, poster }: { className?: string; poster: string }) {
-  // Subscribe to skin store for future skin switching functionality
   const $skin = useStore(skin);
   const SkinComponent = $skin === 'frosted' ? FrostedSkin : MinimalSkin;
 

site/src/components/typography/Pre.astro

@@ -23,13 +23,13 @@ const value = 'code';
       <slot />
     </Tag>
   ) : (
-    <TabsRoot client:load>
-      <TabsList client:load label={`${label} code`}>
-        <Tab client:load value={value} initial>
+    <TabsRoot client:visible>
+      <TabsList client:visible label={`${label} code`}>
+        <Tab client:visible value={value} initial>
           {label}
         </Tab>
       </TabsList>
-      <TabsPanel client:load value={value} initial>
+      <TabsPanel client:visible value={value} initial>
         <Tag class={className} {...props}>
           <slot />
         </Tag>