fix: lighten library landing page startup

Author: tannerlinsley

src/components/LazyCodeExampleCard.tsx

@@ -0,0 +1,47 @@
+import React from 'react'
+import type { Framework } from '~/libraries'
+import { useIntersectionObserver } from '~/hooks/useIntersectionObserver'
+
+const LazyCodeExampleCardImpl = React.lazy(async () => {
+  const mod = await import('./CodeExampleCard')
+
+  return { default: mod.CodeExampleCard }
+})
+
+interface LazyCodeExampleCardProps {
+  title?: string
+  frameworks: Framework[]
+  codeByFramework: Partial<Record<Framework, { lang: string; code: string }>>
+}
+
+export function LazyCodeExampleCard(props: LazyCodeExampleCardProps) {
+  const { ref, isIntersecting } = useIntersectionObserver({
+    rootMargin: '25%',
+    triggerOnce: true,
+  })
+
+  return (
+    <div ref={ref} className="px-4 space-y-4 flex flex-col items-center">
+      {!isIntersecting ? (
+        <div className="w-full max-w-5xl mx-auto space-y-4">
+          <div className="h-10 w-56 mx-auto rounded bg-gray-200/70 dark:bg-gray-800/70 animate-pulse" />
+          <div className="rounded-xl border border-gray-200 dark:border-gray-800 bg-white/70 dark:bg-gray-900/70 overflow-hidden">
+            <div className="h-14 border-b border-gray-200 dark:border-gray-800 bg-gray-100/70 dark:bg-gray-800/70 animate-pulse" />
+            <div className="p-4 space-y-3">
+              <div className="h-4 w-11/12 rounded bg-gray-200/70 dark:bg-gray-800/70 animate-pulse" />
+              <div className="h-4 w-10/12 rounded bg-gray-200/70 dark:bg-gray-800/70 animate-pulse" />
+              <div className="h-4 w-8/12 rounded bg-gray-200/70 dark:bg-gray-800/70 animate-pulse" />
+              <div className="h-4 w-9/12 rounded bg-gray-200/70 dark:bg-gray-800/70 animate-pulse" />
+              <div className="h-4 w-7/12 rounded bg-gray-200/70 dark:bg-gray-800/70 animate-pulse" />
+              <div className="h-48 rounded bg-gray-100/70 dark:bg-gray-800/50 animate-pulse" />
+            </div>
+          </div>
+        </div>
+      ) : (
+        <React.Suspense fallback={null}>
+          <LazyCodeExampleCardImpl {...props} />
+        </React.Suspense>
+      )}
+    </div>
+  )
+}

src/components/landing/FormLanding.tsx

@@ -14,7 +14,7 @@ import { LibraryTestimonials } from '~/components/LibraryTestimonials'
 import { LibraryShowcases } from '~/components/ShowcaseSection'
 import { LibraryPageContainer } from '~/components/LibraryPageContainer'
 import { LibraryStatsSection } from '~/components/LibraryStatsSection'
-import { CodeExampleCard } from '~/components/CodeExampleCard'
+import { LazyCodeExampleCard } from '~/components/LazyCodeExampleCard'
 import { StackBlitzSection } from '~/components/StackBlitzSection'
 
 const library = getLibrary('form')
@@ -148,7 +148,7 @@ export default function FormLanding() {
 
       <LibraryTestimonials testimonials={formProject.testimonials} />
 
-      <CodeExampleCard
+      <LazyCodeExampleCard
         frameworks={formProject.frameworks}
         codeByFramework={codeExamples}
       />

src/components/landing/QueryLanding.tsx

@@ -14,7 +14,7 @@ import { LibraryTestimonials } from '~/components/LibraryTestimonials'
 import { LibraryShowcases } from '~/components/ShowcaseSection'
 import { LibraryPageContainer } from '~/components/LibraryPageContainer'
 import { LibraryStatsSection } from '~/components/LibraryStatsSection'
-import { CodeExampleCard } from '~/components/CodeExampleCard'
+import { LazyCodeExampleCard } from '~/components/LazyCodeExampleCard'
 import { StackBlitzSection } from '~/components/StackBlitzSection'
 import { FeatureGridSection } from '~/components/FeatureGridSection'
 
@@ -163,7 +163,7 @@ export default function QueryLanding() {
 
       <LibraryStatsSection library={library} />
 
-      <CodeExampleCard
+      <LazyCodeExampleCard
         frameworks={queryProject.frameworks}
         codeByFramework={codeExamples}
       />

src/components/landing/RouterLanding.tsx

@@ -14,7 +14,7 @@ import { LibraryTestimonials } from '~/components/LibraryTestimonials'
 import { LibraryShowcases } from '~/components/ShowcaseSection'
 import { LibraryPageContainer } from '~/components/LibraryPageContainer'
 import { LibraryStatsSection } from '~/components/LibraryStatsSection'
-import { CodeExampleCard } from '~/components/CodeExampleCard'
+import { LazyCodeExampleCard } from '~/components/LazyCodeExampleCard'
 import { StackBlitzSection } from '~/components/StackBlitzSection'
 
 const library = getLibrary('router')
@@ -78,7 +78,7 @@ export default function RouterLanding() {
 
       <LibraryStatsSection library={library} />
 
-      <CodeExampleCard
+      <LazyCodeExampleCard
         frameworks={routerProject.frameworks}
         codeByFramework={codeExamples}
       />

src/components/landing/VirtualLanding.tsx

@@ -17,7 +17,7 @@ import { MaintainersSection } from '~/components/MaintainersSection'
 import { LibraryTestimonials } from '~/components/LibraryTestimonials'
 import { LibraryPageContainer } from '~/components/LibraryPageContainer'
 import { LibraryStatsSection } from '~/components/LibraryStatsSection'
-import { CodeExampleCard } from '~/components/CodeExampleCard'
+import { LazyCodeExampleCard } from '~/components/LazyCodeExampleCard'
 
 const library = getLibrary('virtual')
 
@@ -146,7 +146,7 @@ export default function VirtualLanding() {
 
       <LibraryStatsSection library={library} />
 
-      <CodeExampleCard
+      <LazyCodeExampleCard
         frameworks={virtualProject.frameworks}
         codeByFramework={codeExamples}
       />

src/routes/$libraryId/$version.index.tsx

@@ -1,16 +1,9 @@
-import {
-  useMatch,
-  Link,
-  notFound,
-  createFileRoute,
-} from '@tanstack/react-router'
-import { DocsLayout } from '~/components/DocsLayout'
+import { Link, notFound, createFileRoute } from '@tanstack/react-router'
 import { findLibrary } from '~/libraries'
 import type { LibraryId } from '~/libraries'
 import { seo } from '~/utils/seo'
 
 import { Button } from '~/ui'
-import { ConfigSchema } from '~/utils/config'
 import { landingComponents } from './$version'
 
 export const Route = createFileRoute('/$libraryId/$version/')({
@@ -41,26 +34,13 @@ function LibraryVersionIndex() {
   if (!library) {
     throw notFound()
   }
-  const versionMatch = useMatch({ from: '/$libraryId/$version' })
-  const { config } = versionMatch.loaderData as { config: ConfigSchema }
 
   const LandingComponent = landingComponents[libraryId as LibraryId]
 
   if (!LandingComponent) {
     return (
-      <DocsLayout
-        name={library.name.replace('TanStack ', '')}
-        version={version === 'latest' ? library.latestVersion : version!}
-        colorFrom={library.accentColorFrom ?? library.colorFrom}
-        colorTo={library.accentColorTo ?? library.colorTo}
-        textColor={library.accentTextColor ?? library.textColor ?? ''}
-        config={config}
-        frameworks={library.frameworks}
-        versions={library.availableVersions}
-        repo={library.repo}
-        isLandingPage
-      >
-        <div className="flex flex-col items-center justify-center min-h-[50vh] gap-4">
+      <div className="px-4 pt-32 pb-24">
+        <div className="flex flex-col items-center justify-center min-h-[50vh] gap-4 max-w-3xl mx-auto text-center">
           <h1 className="text-2xl font-bold">{library.name}</h1>
           <p className="text-gray-600">{library.description}</p>
           <Button
@@ -71,24 +51,9 @@ function LibraryVersionIndex() {
             View Documentation
           </Button>
         </div>
-      </DocsLayout>
+      </div>
     )
   }
 
-  return (
-    <DocsLayout
-      name={library.name.replace('TanStack ', '')}
-      version={version === 'latest' ? library.latestVersion : version!}
-      colorFrom={library.accentColorFrom ?? library.colorFrom}
-      colorTo={library.accentColorTo ?? library.colorTo}
-      textColor={library.accentTextColor ?? library.textColor ?? ''}
-      config={config}
-      frameworks={library.frameworks}
-      versions={library.availableVersions}
-      repo={library.repo}
-      isLandingPage
-    >
-      <LandingComponent />
-    </DocsLayout>
-  )
+  return <LandingComponent />
 }

src/routes/$libraryId/$version.tsx

@@ -64,9 +64,15 @@ export const Route = createFileRoute('/$libraryId/$version')({
       })
     }
 
-    await landingComponents[libraryId as LibraryId]?.preload?.()
+    if (!ctx.location.pathname.includes('/docs')) {
+      await landingComponents[libraryId as LibraryId]?.preload?.()
+    }
   },
   loader: async (ctx) => {
+    if (!ctx.location.pathname.includes('/docs')) {
+      return { config: null }
+    }
+
     const { libraryId, version } = ctx.params
     const library = findLibrary(libraryId)