Use Start deferred hydration APIs

package.json

@@ -65,6 +65,7 @@
     "@tanstack/react-router-devtools": "1.167.0",
     "@tanstack/react-router-ssr-query": "1.167.0",
     "@tanstack/react-start": "1.168.10",
+    "@tanstack/react-start-client": "1.168.2",
     "@tanstack/react-table": "^8.21.3",
     "@types/d3": "^7.4.3",
     "@uploadthing/react": "^7.3.3",

src/components/DeferredApplicationStarter.tsx

@@ -1,93 +1,20 @@
-import * as React from 'react'
+import { Hydrate } from '@tanstack/react-start'
+import { idle, visible } from '@tanstack/react-start/hydration'
 
-import type { ApplicationStarterProps } from '~/components/ApplicationStarter'
-
-const LazyApplicationStarter = React.lazy(() =>
-  import('~/components/ApplicationStarter').then((m) => ({
-    default: m.ApplicationStarter,
-  })),
-)
+import {
+  ApplicationStarter,
+  type ApplicationStarterProps,
+} from '~/components/ApplicationStarter'
 
 export function DeferredApplicationStarter(props: ApplicationStarterProps) {
-  const wrapperRef = React.useRef<HTMLDivElement | null>(null)
-  const [shouldLoad, setShouldLoad] = React.useState(false)
-
-  React.useEffect(() => {
-    if (shouldLoad) {
-      return
-    }
-
-    const element = wrapperRef.current
-
-    if (!element || typeof IntersectionObserver === 'undefined') {
-      setShouldLoad(true)
-      return
-    }
-
-    const observer = new IntersectionObserver(
-      (entries) => {
-        if (!entries.some((entry) => entry.isIntersecting)) {
-          return
-        }
-
-        setShouldLoad(true)
-        observer.disconnect()
-      },
-      { rootMargin: '320px 0px' },
-    )
-
-    observer.observe(element)
-
-    return () => {
-      observer.disconnect()
-    }
-  }, [shouldLoad])
-
-  React.useEffect(() => {
-    if (shouldLoad || typeof window === 'undefined') {
-      return
-    }
-
-    const requestIdleCallback = window.requestIdleCallback
-    const cancelIdleCallback = window.cancelIdleCallback
-
-    if (
-      typeof requestIdleCallback === 'function' &&
-      typeof cancelIdleCallback === 'function'
-    ) {
-      const idleId = requestIdleCallback(
-        () => {
-          setShouldLoad(true)
-        },
-        { timeout: 2500 },
-      )
-
-      return () => {
-        cancelIdleCallback(idleId)
-      }
-    }
-
-    const timeoutId = window.setTimeout(() => {
-      setShouldLoad(true)
-    }, 1500)
-
-    return () => {
-      window.clearTimeout(timeoutId)
-    }
-  }, [shouldLoad])
-
   return (
-    <div ref={wrapperRef}>
-      {shouldLoad ? (
-        <React.Suspense
-          fallback={<DeferredApplicationStarterFallback mode={props.mode} />}
-        >
-          <LazyApplicationStarter {...props} />
-        </React.Suspense>
-      ) : (
-        <DeferredApplicationStarterFallback mode={props.mode} />
-      )}
-    </div>
+    <Hydrate
+      when={visible({ rootMargin: '320px 0px' })}
+      prefetch={idle({ timeout: 2500 })}
+      fallback={<DeferredApplicationStarterFallback mode={props.mode} />}
+    >
+      <ApplicationStarter {...props} />
+    </Hydrate>
   )
 }
 

src/components/LazyLandingCommunitySection.tsx

@@ -1,18 +1,9 @@
-import * as React from 'react'
-import type { LibraryId } from '~/libraries'
-import { useIntersectionObserver } from '~/hooks/useIntersectionObserver'
-
-const LazyMaintainersSection = React.lazy(async () => {
-  const mod = await import('./MaintainersSection')
-
-  return { default: mod.MaintainersSection }
-})
+import { Hydrate } from '@tanstack/react-start'
+import { visible } from '@tanstack/react-start/hydration'
 
-const LazyPartnersSection = React.lazy(async () => {
-  const mod = await import('./PartnersSection')
-
-  return { default: mod.PartnersSection }
-})
+import type { LibraryId } from '~/libraries'
+import { MaintainersSection } from './MaintainersSection'
+import { PartnersSection } from './PartnersSection'
 
 interface LazyLandingCommunitySectionProps {
   libraryId: LibraryId
@@ -41,31 +32,20 @@ function SectionSkeleton({ title }: { title: string }) {
 export function LazyLandingCommunitySection({
   libraryId,
 }: LazyLandingCommunitySectionProps) {
-  const { ref, isIntersecting } = useIntersectionObserver({
-    rootMargin: '25%',
-    triggerOnce: true,
-  })
-
   return (
-    <div ref={ref} className="flex flex-col gap-20 md:gap-24">
-      {!isIntersecting ? (
-        <>
+    <Hydrate
+      when={visible({ rootMargin: '25%' })}
+      fallback={
+        <div className="flex flex-col gap-20 md:gap-24">
           <SectionSkeleton title="Maintainers" />
           <SectionSkeleton title="Partners" />
-        </>
-      ) : (
-        <React.Suspense
-          fallback={
-            <>
-              <SectionSkeleton title="Maintainers" />
-              <SectionSkeleton title="Partners" />
-            </>
-          }
-        >
-          <LazyMaintainersSection libraryId={libraryId} />
-          <LazyPartnersSection libraryId={libraryId} />
-        </React.Suspense>
-      )}
-    </div>
+        </div>
+      }
+    >
+      <div className="flex flex-col gap-20 md:gap-24">
+        <MaintainersSection libraryId={libraryId} />
+        <PartnersSection libraryId={libraryId} />
+      </div>
+    </Hydrate>
   )
 }

src/components/LazySponsorSection.tsx

@@ -1,17 +1,17 @@
-import React from 'react'
+import type { CSSProperties, ReactNode } from 'react'
 import { useQuery } from '@tanstack/react-query'
+import { Hydrate } from '@tanstack/react-start'
+import { visible } from '@tanstack/react-start/hydration'
 import { ArrowRight } from 'lucide-react'
-import { useIntersectionObserver } from '~/hooks/useIntersectionObserver'
 import { getSponsorsForSponsorPack } from '~/utils/sponsors.functions'
 import { Button } from '~/ui'
 import PlaceholderSponsorPack from './PlaceholderSponsorPack'
-
-const LazySponsorPack = React.lazy(() => import('./SponsorPack'))
+import SponsorPack from './SponsorPack'
 
 type LazySponsorSectionProps = {
-  title?: React.ReactNode
+  title?: ReactNode
   aspectRatio?: string
-  packMaxWidth?: React.CSSProperties['maxWidth']
+  packMaxWidth?: CSSProperties['maxWidth']
   showCTA?: boolean
 }
 
@@ -26,7 +26,7 @@ function SponsorPackWithQuery() {
     return <PlaceholderSponsorPack />
   }
 
-  return <LazySponsorPack sponsors={sponsors} />
+  return <SponsorPack sponsors={sponsors} />
 }
 
 export function LazySponsorSection({
@@ -35,29 +35,20 @@ export function LazySponsorSection({
   packMaxWidth,
   showCTA = true,
 }: LazySponsorSectionProps) {
-  const { ref, isIntersecting } = useIntersectionObserver({
-    rootMargin: '50%', // Half viewport height - triggers when about half a page away
-    triggerOnce: true,
-  })
-
   return (
-    <div
-      ref={ref}
-      className="px-4 w-full lg:max-w-(--breakpoint-lg) md:mx-auto"
-    >
+    <div className="px-4 w-full lg:max-w-(--breakpoint-lg) md:mx-auto">
       <div className="space-y-8">
         <h3 className="text-3xl font-bold">{title}</h3>
         <div
           className="relative mx-auto flex w-full flex-wrap overflow-hidden"
           style={{ aspectRatio, maxWidth: packMaxWidth }}
         >
-          {!isIntersecting ? (
-            <PlaceholderSponsorPack />
-          ) : (
-            <React.Suspense fallback={<PlaceholderSponsorPack />}>
-              <SponsorPackWithQuery />
-            </React.Suspense>
-          )}
+          <Hydrate
+            when={visible({ rootMargin: '50%' })}
+            fallback={<PlaceholderSponsorPack />}
+          >
+            <SponsorPackWithQuery />
+          </Hydrate>
         </div>
         {showCTA ? (
           <div className="flex justify-center">

src/components/home/HomeApplicationStarter.tsx

@@ -1,95 +1,22 @@
-import * as React from 'react'
+import { Hydrate } from '@tanstack/react-start'
+import { idle, visible } from '@tanstack/react-start/hydration'
 
+import { ApplicationStarter } from '~/components/ApplicationStarter'
 import { HomeApplicationStarterFallback } from './HomeSectionFallbacks'
 
-const LazyApplicationStarter = React.lazy(() =>
-  import('~/components/ApplicationStarter').then((m) => ({
-    default: m.ApplicationStarter,
-  })),
-)
-
 export function HomeApplicationStarter() {
-  const wrapperRef = React.useRef<HTMLDivElement | null>(null)
-  const [shouldLoad, setShouldLoad] = React.useState(false)
-
-  React.useEffect(() => {
-    if (shouldLoad) {
-      return
-    }
-
-    const element = wrapperRef.current
-
-    if (!element || typeof IntersectionObserver === 'undefined') {
-      setShouldLoad(true)
-      return
-    }
-
-    const observer = new IntersectionObserver(
-      (entries) => {
-        if (!entries.some((entry) => entry.isIntersecting)) {
-          return
-        }
-
-        React.startTransition(() => {
-          setShouldLoad(true)
-        })
-        observer.disconnect()
-      },
-      { rootMargin: '180px 0px' },
-    )
-
-    observer.observe(element)
-
-    return () => {
-      observer.disconnect()
-    }
-  }, [shouldLoad])
-
-  React.useEffect(() => {
-    if (shouldLoad || typeof window === 'undefined') {
-      return
-    }
-
-    if (typeof window.requestIdleCallback === 'function') {
-      const idleId = window.requestIdleCallback(
-        () => {
-          React.startTransition(() => {
-            setShouldLoad(true)
-          })
-        },
-        { timeout: 3500 },
-      )
-
-      return () => {
-        window.cancelIdleCallback(idleId)
-      }
-    }
-
-    const timeoutId = window.setTimeout(() => {
-      React.startTransition(() => {
-        setShouldLoad(true)
-      })
-    }, 2500)
-
-    return () => {
-      window.clearTimeout(timeoutId)
-    }
-  }, [shouldLoad])
-
   return (
-    <div ref={wrapperRef}>
-      {shouldLoad ? (
-        <React.Suspense fallback={<HomeApplicationStarterFallback />}>
-          <LazyApplicationStarter
-            context="home"
-            enableHotkeys
-            primaryButtonColor="cyan"
-            tone="cyan"
-          />
-        </React.Suspense>
-      ) : (
-        <HomeApplicationStarterFallback />
-      )}
-    </div>
+    <Hydrate
+      when={visible({ rootMargin: '180px 0px' })}
+      prefetch={idle({ timeout: 3500 })}
+      fallback={<HomeApplicationStarterFallback />}
+    >
+      <ApplicationStarter
+        context="home"
+        enableHotkeys
+        primaryButtonColor="cyan"
+        tone="cyan"
+      />
+    </Hydrate>
   )
 }