improve lib landing

Author: LadyBluenotes

src/components/LazyLandingCodeExample.tsx

@@ -0,0 +1,57 @@
+import { useQuery } from '@tanstack/react-query'
+import type { LibraryId } from '~/libraries'
+import { useIntersectionObserver } from '~/hooks/useIntersectionObserver'
+import { fetchLandingCodeExample } from '~/utils/landing-code-example.functions'
+
+function LandingCodeExamplePlaceholder() {
+  return (
+    <div className="px-4 space-y-4 flex flex-col items-center">
+      <div className="text-3xl font-black">Just a quick look...</div>
+      <div className="w-full max-w-3xl min-w-0 rounded-lg overflow-hidden bg-gray-100 dark:bg-gray-800 animate-pulse">
+        <div className="flex gap-2 border-b border-gray-200 dark:border-gray-700 px-3 py-2">
+          <div className="h-6 w-16 rounded bg-gray-200 dark:bg-gray-700" />
+          <div className="h-6 w-16 rounded bg-gray-200 dark:bg-gray-700" />
+          <div className="h-6 w-16 rounded bg-gray-200 dark:bg-gray-700" />
+        </div>
+        <div className="space-y-3 p-4">
+          <div className="h-4 w-5/6 rounded bg-gray-200 dark:bg-gray-700" />
+          <div className="h-4 w-3/4 rounded bg-gray-200 dark:bg-gray-700" />
+          <div className="h-4 w-4/5 rounded bg-gray-200 dark:bg-gray-700" />
+          <div className="h-4 w-2/3 rounded bg-gray-200 dark:bg-gray-700" />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export function LazyLandingCodeExample({
+  libraryId,
+}: {
+  libraryId: LibraryId
+}) {
+  const { ref, isIntersecting } = useIntersectionObserver({
+    rootMargin: '25%',
+    triggerOnce: true,
+  })
+  const { data, isLoading } = useQuery({
+    queryKey: ['landing-code-example', libraryId],
+    queryFn: () =>
+      fetchLandingCodeExample({
+        data: {
+          libraryId,
+        },
+      }),
+    enabled: isIntersecting,
+    staleTime: 5 * 60 * 1000,
+  })
+
+  if (isIntersecting && !isLoading && !data?.contentRsc) {
+    return null
+  }
+
+  return (
+    <div ref={ref}>
+      {data?.contentRsc ? data.contentRsc : <LandingCodeExamplePlaceholder />}
+    </div>
+  )
+}

src/components/landing/FormLanding.tsx

@@ -7,19 +7,17 @@ import { LibraryHero } from '~/components/LibraryHero'
 import { LibraryPageContainer } from '~/components/LibraryPageContainer'
 import { LibraryStatsSection } from '~/components/LibraryStatsSection'
 import { LibraryTestimonials } from '~/components/LibraryTestimonials'
+import { LazyLandingCodeExample } from '~/components/LazyLandingCodeExample'
 import { LazyLandingCommunitySection } from '~/components/LazyLandingCommunitySection'
 import { LazySponsorSection } from '~/components/LazySponsorSection'
 import LandingPageGad from '~/components/LandingPageGad'
 import { StackBlitzSection } from '~/components/StackBlitzSection'
 import { getBranch, getLibrary } from '~/libraries'
 import { formProject } from '~/libraries/form'
-import type { LandingComponentProps } from '~/routes/$libraryId/$version'
 
 const library = getLibrary('form')
 
-export default function FormLanding({
-  landingCodeExampleRsc,
-}: LandingComponentProps) {
+export default function FormLanding() {
   const { version } = useParams({ strict: false })
   const branch = getBranch(formProject, version)
 
@@ -46,7 +44,7 @@ export default function FormLanding({
 
       <LibraryTestimonials testimonials={formProject.testimonials} />
 
-      {landingCodeExampleRsc}
+      <LazyLandingCodeExample libraryId="form" />
 
       <FeatureGrid
         title="No dependencies. All the Features."

src/components/landing/QueryLanding.tsx

@@ -7,20 +7,18 @@ import { LibraryHero } from '~/components/LibraryHero'
 import { LibraryPageContainer } from '~/components/LibraryPageContainer'
 import { LibraryStatsSection } from '~/components/LibraryStatsSection'
 import { LibraryTestimonials } from '~/components/LibraryTestimonials'
+import { LazyLandingCodeExample } from '~/components/LazyLandingCodeExample'
 import { LazyLandingCommunitySection } from '~/components/LazyLandingCommunitySection'
 import { LazySponsorSection } from '~/components/LazySponsorSection'
 import LandingPageGad from '~/components/LandingPageGad'
 import { QueryGGBanner } from '~/components/QueryGGBanner'
 import { StackBlitzSection } from '~/components/StackBlitzSection'
 import { getBranch, getLibrary } from '~/libraries'
 import { queryProject } from '~/libraries/query'
-import type { LandingComponentProps } from '~/routes/$libraryId/$version'
 
 const library = getLibrary('query')
 
-export default function QueryLanding({
-  landingCodeExampleRsc,
-}: LandingComponentProps) {
+export default function QueryLanding() {
   const { version } = useParams({ strict: false })
   const branch = getBranch(queryProject, version)
 
@@ -40,7 +38,7 @@ export default function QueryLanding({
 
       <LibraryStatsSection library={library} />
 
-      {landingCodeExampleRsc}
+      <LazyLandingCodeExample libraryId="query" />
 
       <LibraryFeatureHighlights
         featureHighlights={queryProject.featureHighlights}

src/components/landing/RouterLanding.tsx

@@ -8,19 +8,17 @@ import { LibraryHero } from '~/components/LibraryHero'
 import { LibraryPageContainer } from '~/components/LibraryPageContainer'
 import { LibraryStatsSection } from '~/components/LibraryStatsSection'
 import { LibraryTestimonials } from '~/components/LibraryTestimonials'
+import { LazyLandingCodeExample } from '~/components/LazyLandingCodeExample'
 import { LazyLandingCommunitySection } from '~/components/LazyLandingCommunitySection'
 import { LazySponsorSection } from '~/components/LazySponsorSection'
 import LandingPageGad from '~/components/LandingPageGad'
 import { StackBlitzSection } from '~/components/StackBlitzSection'
 import { getBranch, getLibrary } from '~/libraries'
 import { routerProject } from '~/libraries/router'
-import type { LandingComponentProps } from '~/routes/$libraryId/$version'
 
 const library = getLibrary('router')
 
-export default function RouterLanding({
-  landingCodeExampleRsc,
-}: LandingComponentProps) {
+export default function RouterLanding() {
   const { version } = useParams({ strict: false })
   const branch = getBranch(routerProject, version)
 
@@ -55,7 +53,7 @@ export default function RouterLanding({
         <LibraryStatsSection library={library} />
       </div>
 
-      {landingCodeExampleRsc}
+      <LazyLandingCodeExample libraryId="router" />
 
       <LibraryFeatureHighlights
         featureHighlights={routerProject.featureHighlights}

src/components/landing/TableLanding.tsx

@@ -9,20 +9,18 @@ import { LibraryHero } from '~/components/LibraryHero'
 import { LibraryPageContainer } from '~/components/LibraryPageContainer'
 import { LibraryStatsSection } from '~/components/LibraryStatsSection'
 import { LibraryTestimonials } from '~/components/LibraryTestimonials'
+import { LazyLandingCodeExample } from '~/components/LazyLandingCodeExample'
 import { LazyLandingCommunitySection } from '~/components/LazyLandingCommunitySection'
 import { LazySponsorSection } from '~/components/LazySponsorSection'
 import LandingPageGad from '~/components/LandingPageGad'
 import { StackBlitzEmbed } from '~/components/StackBlitzEmbed'
 import { Framework, getBranch, getLibrary } from '~/libraries'
 import { tableProject } from '~/libraries/table'
-import type { LandingComponentProps } from '~/routes/$libraryId/$version'
 import { getExampleStartingPath } from '~/utils/sandbox'
 
 const library = getLibrary('table')
 
-export default function TableLanding({
-  landingCodeExampleRsc,
-}: LandingComponentProps) {
+export default function TableLanding() {
   const { version } = useParams({ strict: false })
   const branch = getBranch(tableProject, version)
   const [framework, setFramework] = useState<Framework>('react')
@@ -44,7 +42,7 @@ export default function TableLanding({
 
       <LibraryStatsSection library={library} />
 
-      {landingCodeExampleRsc}
+      <LazyLandingCodeExample libraryId="table" />
 
       <LibraryFeatureHighlights
         featureHighlights={tableProject.featureHighlights}

src/components/landing/VirtualLanding.tsx

@@ -9,19 +9,17 @@ import { LibraryHero } from '~/components/LibraryHero'
 import { LibraryPageContainer } from '~/components/LibraryPageContainer'
 import { LibraryStatsSection } from '~/components/LibraryStatsSection'
 import { LibraryTestimonials } from '~/components/LibraryTestimonials'
+import { LazyLandingCodeExample } from '~/components/LazyLandingCodeExample'
 import { LazyLandingCommunitySection } from '~/components/LazyLandingCommunitySection'
 import { LazySponsorSection } from '~/components/LazySponsorSection'
 import LandingPageGad from '~/components/LandingPageGad'
 import { StackBlitzEmbed } from '~/components/StackBlitzEmbed'
 import { Framework, getBranch, getLibrary } from '~/libraries'
 import { virtualProject } from '~/libraries/virtual'
-import type { LandingComponentProps } from '~/routes/$libraryId/$version'
 
 const library = getLibrary('virtual')
 
-export default function VirtualLanding({
-  landingCodeExampleRsc,
-}: LandingComponentProps) {
+export default function VirtualLanding() {
   const { version } = useParams({ strict: false })
   const [framework, setFramework] = useState<Framework>('react')
   const branch = getBranch(virtualProject, version)
@@ -43,7 +41,7 @@ export default function VirtualLanding({
 
       <LibraryStatsSection library={library} />
 
-      {landingCodeExampleRsc}
+      <LazyLandingCodeExample libraryId="virtual" />
 
       <LibraryFeatureHighlights
         featureHighlights={virtualProject.featureHighlights}

src/routes/-library-landing.tsx

@@ -1,17 +1,14 @@
-import type { ComponentType, ReactNode } from 'react'
+import type { ComponentType } from 'react'
 import { getRouteApi, Link, notFound, redirect } from '@tanstack/react-router'
 import { DocsLayout } from '~/components/DocsLayout'
 import { RedirectVersionBanner } from '~/components/RedirectVersionBanner'
 import { Scarf } from '~/components/Scarf'
 import { findLibrary, getBranch, getLibrary } from '~/libraries'
 import type { LibraryId } from '~/libraries'
 import { getTanstackDocsConfig } from '~/utils/config'
-import { fetchLandingCodeExample } from '~/utils/landing-code-example.functions'
 import { seo } from '~/utils/seo'
 
-export type LandingComponentProps = {
-  landingCodeExampleRsc?: ReactNode
-}
+export type LandingComponentProps = Record<string, never>
 
 type LandingComponent = ComponentType<LandingComponentProps>
 
@@ -113,7 +110,7 @@ export function createLibraryLandingPage<TId extends StaticLandingRoutePath>(
 
   function LibraryLandingPage() {
     const { version } = routeApi.useParams()
-    const { config, landingCodeExampleRsc } = routeApi.useLoaderData()
+    const { config } = routeApi.useLoaderData()
 
     if (!config) {
       throw notFound()
@@ -134,7 +131,7 @@ export function createLibraryLandingPage<TId extends StaticLandingRoutePath>(
           repo={library.repo}
           isLandingPage
         >
-          <LandingComponent landingCodeExampleRsc={landingCodeExampleRsc} />
+          <LandingComponent />
         </DocsLayout>
         <RedirectVersionBanner
           version={version!}
@@ -158,18 +155,10 @@ export function createLibraryLandingPage<TId extends StaticLandingRoutePath>(
       })
     },
     loader: async ({ params }: { params: { version: string } }) => {
-      const [config, landingCodeExample] = await Promise.all([
-        loadLibraryConfig(libraryId, params.version),
-        fetchLandingCodeExample({
-          data: {
-            libraryId,
-          },
-        }),
-      ])
+      const config = await loadLibraryConfig(libraryId, params.version)
 
       return {
         config,
-        landingCodeExampleRsc: landingCodeExample?.contentRsc ?? null,
       }
     },
     head: () => ({