fix: render stat counters on client load

src/components/OpenSourceStats.tsx

@@ -61,18 +61,20 @@ const NpmDownloadCounter = ({
   return <StableCounter value={count} intervalMs={intervalMs} />
 }
 
+export function ossStatsQuery({ library }: { library?: Library } = {}) {
+  return convexQuery(api.stats.getStats, {
+    library: library
+      ? {
+          id: library.id,
+          repo: library.repo,
+          frameworks: library.frameworks,
+        }
+      : undefined,
+  })
+}
+
 export function _OssStats({ library }: { library?: Library }) {
-  const { data: stats } = useSuspenseQuery(
-    convexQuery(api.stats.getStats, {
-      library: library
-        ? {
-            id: library.id,
-            repo: library.repo,
-            frameworks: library.frameworks,
-          }
-        : undefined,
-    })
-  )
+  const { data: stats } = useSuspenseQuery(ossStatsQuery({ library }))
 
   return (
     <div>

src/routes/_libraries/config.$version.index.tsx

@@ -11,10 +11,15 @@ import { seo } from '~/utils/seo'
 import LandingPageGad from '~/components/LandingPageGad'
 import { PartnershipCallout } from '~/components/PartnershipCallout'
 import { PartnersSection } from '~/components/PartnersSection'
-import OpenSourceStats from '~/components/OpenSourceStats'
+import OpenSourceStats, { ossStatsQuery } from '~/components/OpenSourceStats'
+
+const library = getLibrary('config')
 
 export const Route = createFileRoute({
   component: FormVersionIndex,
+  loader: async ({ context: { queryClient } }) => {
+    await queryClient.ensureQueryData(ossStatsQuery({ library }))
+  },
   head: () => ({
     meta: seo({
       title: configProject.name,
@@ -27,7 +32,6 @@ const librariesRouteApi = getRouteApi('/_libraries')
 
 export default function FormVersionIndex() {
   const { sponsorsPromise } = librariesRouteApi.useLoaderData()
-  const library = getLibrary('config')
 
   return (
     <>

src/routes/_libraries/db.$version.index.tsx

@@ -10,7 +10,10 @@ import { getLibrary } from '~/libraries'
 import { LibraryFeatureHighlights } from '~/components/LibraryFeatureHighlights'
 import LandingPageGad from '~/components/LandingPageGad'
 import { PartnershipCallout } from '~/components/PartnershipCallout'
-import OpenSourceStats from '~/components/OpenSourceStats'
+import OpenSourceStats, { ossStatsQuery } from '~/components/OpenSourceStats'
+
+const library = getLibrary('db')
+const librariesRouteApi = getRouteApi('/_libraries')
 
 export const Route = createFileRoute({
   component: DBVersionIndex,
@@ -20,11 +23,11 @@ export const Route = createFileRoute({
       description: dbProject.description,
     }),
   }),
+  loader: async ({ context: { queryClient } }) => {
+    await queryClient.ensureQueryData(ossStatsQuery({ library }))
+  },
 })
 
-const librariesRouteApi = getRouteApi('/_libraries')
-const library = getLibrary('db')
-
 export default function DBVersionIndex() {
   const { sponsorsPromise } = librariesRouteApi.useLoaderData()
 

src/routes/_libraries/devtools.$version.index.tsx

@@ -11,7 +11,10 @@ import { seo } from '~/utils/seo'
 import LandingPageGad from '~/components/LandingPageGad'
 import { PartnershipCallout } from '~/components/PartnershipCallout'
 import { PartnersSection } from '~/components/PartnersSection'
-import OpenSourceStats from '~/components/OpenSourceStats'
+import OpenSourceStats, { ossStatsQuery } from '~/components/OpenSourceStats'
+
+const librariesRouteApi = getRouteApi('/_libraries')
+const library = getLibrary('devtools')
 
 export const Route = createFileRoute({
   component: DevtoolsVersionIndex,
@@ -21,10 +24,11 @@ export const Route = createFileRoute({
       description: devtoolsProject.description,
     }),
   }),
+  loader: async ({ context: { queryClient } }) => {
+    await queryClient.ensureQueryData(ossStatsQuery({ library }))
+  },
 })
 
-const librariesRouteApi = getRouteApi('/_libraries')
-
 export default function DevtoolsVersionIndex() {
   const { sponsorsPromise } = librariesRouteApi.useLoaderData()
   const library = getLibrary('devtools')

src/routes/_libraries/form.$version.index.tsx

@@ -15,7 +15,10 @@ import { StackBlitzEmbed } from '~/components/StackBlitzEmbed'
 import LandingPageGad from '~/components/LandingPageGad'
 import { PartnershipCallout } from '~/components/PartnershipCallout'
 import { PartnersSection } from '~/components/PartnersSection'
-import OpenSourceStats from '~/components/OpenSourceStats'
+import OpenSourceStats, { ossStatsQuery } from '~/components/OpenSourceStats'
+
+const librariesRouteApi = getRouteApi('/_libraries')
+const library = getLibrary('form')
 
 export const Route = createFileRoute({
   component: FormVersionIndex,
@@ -25,12 +28,11 @@ export const Route = createFileRoute({
       description: formProject.description,
     }),
   }),
+  loader: async ({ context: { queryClient } }) => {
+    await queryClient.ensureQueryData(ossStatsQuery({ library }))
+  },
 })
 
-const librariesRouteApi = getRouteApi('/_libraries')
-
-const library = getLibrary('form')
-
 export default function FormVersionIndex() {
   const { sponsorsPromise } = librariesRouteApi.useLoaderData()
   const { version } = Route.useParams()
@@ -53,7 +55,7 @@ export default function FormVersionIndex() {
             className: 'bg-yellow-400 text-black',
           }}
         />
-        
+
         <div className="w-fit mx-auto px-4">
           <OpenSourceStats library={library} />
         </div>

src/routes/_libraries/index.tsx

@@ -42,18 +42,7 @@ const courses = [
 
 export const Route = createFileRoute({
   loader: async ({ context: { queryClient } }) => {
-    const githubQuery = queryClient.ensureQueryData(
-      convexQuery(api.stats.getGithubOwner, {
-        owner: 'tanstack',
-      })
-    )
-    const npmQuery = queryClient.ensureQueryData(
-      convexQuery(api.stats.getNpmOrg, {
-        name: 'tanstack',
-      })
-    )
-
-    await Promise.all([githubQuery, npmQuery])
+    await queryClient.ensureQueryData(convexQuery(api.stats.getStats, {}))
 
     return {
       randomNumber: Math.random(),

src/routes/_libraries/pacer.$version.index.tsx

@@ -11,7 +11,10 @@ import { getLibrary } from '~/libraries'
 import { LibraryFeatureHighlights } from '~/components/LibraryFeatureHighlights'
 import LandingPageGad from '~/components/LandingPageGad'
 import { PartnershipCallout } from '~/components/PartnershipCallout'
-import OpenSourceStats from '~/components/OpenSourceStats'
+import OpenSourceStats, { ossStatsQuery } from '~/components/OpenSourceStats'
+
+const librariesRouteApi = getRouteApi('/_libraries')
+const library = getLibrary('pacer')
 
 export const Route = createFileRoute({
   component: PacerVersionIndex,
@@ -21,11 +24,11 @@ export const Route = createFileRoute({
       description: pacerProject.description,
     }),
   }),
+  loader: async ({ context: { queryClient } }) => {
+    await queryClient.ensureQueryData(ossStatsQuery({ library }))
+  },
 })
 
-const librariesRouteApi = getRouteApi('/_libraries')
-const library = getLibrary('pacer')
-
 export default function PacerVersionIndex() {
   const { sponsorsPromise } = librariesRouteApi.useLoaderData()
   const { version } = Route.useParams()
@@ -49,7 +52,7 @@ export default function PacerVersionIndex() {
         <div className="w-fit mx-auto px-4">
           <OpenSourceStats library={library} />
         </div>
-        
+
         <LibraryFeatureHighlights
           featureHighlights={library.featureHighlights}
         />

src/routes/_libraries/query.$version.index.tsx

@@ -19,7 +19,10 @@ import { LibraryFeatureHighlights } from '~/components/LibraryFeatureHighlights'
 import { partners } from '~/utils/partners'
 import LandingPageGad from '~/components/LandingPageGad'
 import { PartnershipCallout } from '~/components/PartnershipCallout'
-import OpenSourceStats from '~/components/OpenSourceStats'
+import OpenSourceStats, { ossStatsQuery } from '~/components/OpenSourceStats'
+
+const librariesRouteApi = getRouteApi('/_libraries')
+const library = getLibrary('query')
 
 export const Route = createFileRoute({
   component: VersionIndex,
@@ -29,12 +32,11 @@ export const Route = createFileRoute({
       description: queryProject.description,
     }),
   }),
+  loader: async ({ context: { queryClient } }) => {
+    await queryClient.ensureQueryData(ossStatsQuery({ library }))
+  },
 })
 
-const librariesRouteApi = getRouteApi('/_libraries')
-
-const library = getLibrary('query')
-
 export default function VersionIndex() {
   const { sponsorsPromise } = librariesRouteApi.useLoaderData()
   const { version } = Route.useParams()

src/routes/_libraries/ranger.$version.index.tsx

@@ -11,7 +11,10 @@ import { seo } from '~/utils/seo'
 import { LibraryFeatureHighlights } from '~/components/LibraryFeatureHighlights'
 import LandingPageGad from '~/components/LandingPageGad'
 import { PartnersSection } from '~/components/PartnersSection'
-import OpenSourceStats from '~/components/OpenSourceStats'
+import OpenSourceStats, { ossStatsQuery } from '~/components/OpenSourceStats'
+
+const librariesRouteApi = getRouteApi('/_libraries')
+const library = getLibrary('ranger')
 
 export const Route = createFileRoute({
   component: VersionIndex,
@@ -21,11 +24,11 @@ export const Route = createFileRoute({
       description: rangerProject.description,
     }),
   }),
+  loader: async ({ context: { queryClient } }) => {
+    await queryClient.ensureQueryData(ossStatsQuery({ library }))
+  },
 })
 
-const librariesRouteApi = getRouteApi('/_libraries')
-const library = getLibrary('ranger')
-
 export default function VersionIndex() {
   const { sponsorsPromise } = librariesRouteApi.useLoaderData()
   const { version } = Route.useParams()

src/routes/_libraries/router.$version.index.tsx

@@ -12,7 +12,10 @@ import { Framework, getBranch, getLibrary } from '~/libraries'
 import { seo } from '~/utils/seo'
 import { LibraryFeatureHighlights } from '~/components/LibraryFeatureHighlights'
 import LandingPageGad from '~/components/LandingPageGad'
-import OpenSourceStats from '~/components/OpenSourceStats'
+import OpenSourceStats, { ossStatsQuery } from '~/components/OpenSourceStats'
+
+const librariesRouteApi = getRouteApi('/_libraries')
+const library = getLibrary('router')
 
 export const Route = createFileRoute({
   component: RouterVersionIndex,
@@ -22,12 +25,11 @@ export const Route = createFileRoute({
       description: routerProject.description,
     }),
   }),
+  loader: async ({ context: { queryClient } }) => {
+    await queryClient.ensureQueryData(ossStatsQuery({ library }))
+  },
 })
 
-const librariesRouteApi = getRouteApi('/_libraries')
-
-const library = getLibrary('router')
-
 function RouterVersionIndex() {
   const { sponsorsPromise } = librariesRouteApi.useLoaderData()
   const { version } = Route.useParams()

src/routes/_libraries/start.$version.index.tsx

@@ -14,9 +14,12 @@ import { getLibrary } from '~/libraries'
 import { LibraryFeatureHighlights } from '~/components/LibraryFeatureHighlights'
 import LandingPageGad from '~/components/LandingPageGad'
 import { PartnersSection } from '~/components/PartnersSection'
-import OpenSourceStats from '~/components/OpenSourceStats'
+import OpenSourceStats, { ossStatsQuery } from '~/components/OpenSourceStats'
 import { TbBrandX } from 'react-icons/tb'
 
+const librariesRouteApi = getRouteApi('/_libraries')
+const library = getLibrary('start')
+
 export const Route = createFileRoute({
   component: VersionIndex,
   head: () => ({
@@ -25,12 +28,11 @@ export const Route = createFileRoute({
       description: startProject.description,
     }),
   }),
+  loader: async ({ context: { queryClient } }) => {
+    await queryClient.ensureQueryData(ossStatsQuery({ library }))
+  },
 })
 
-const librariesRouteApi = getRouteApi('/_libraries')
-
-const library = getLibrary('start')
-
 export default function VersionIndex() {
   const { sponsorsPromise } = librariesRouteApi.useLoaderData()
   const [isDark, setIsDark] = React.useState(true)

src/routes/_libraries/store.$version.index.tsx

@@ -10,7 +10,10 @@ import { LibraryFeatureHighlights } from '~/components/LibraryFeatureHighlights'
 import LandingPageGad from '~/components/LandingPageGad'
 import { PartnershipCallout } from '~/components/PartnershipCallout'
 import { PartnersSection } from '~/components/PartnersSection'
-import OpenSourceStats from '~/components/OpenSourceStats'
+import OpenSourceStats, { ossStatsQuery } from '~/components/OpenSourceStats'
+
+const librariesRouteApi = getRouteApi('/_libraries')
+const library = getLibrary('store')
 
 export const Route = createFileRoute({
   component: StoreVersionIndex,
@@ -20,11 +23,11 @@ export const Route = createFileRoute({
       description: storeProject.description,
     }),
   }),
+  loader: async ({ context: { queryClient } }) => {
+    await queryClient.ensureQueryData(ossStatsQuery({ library }))
+  },
 })
 
-const librariesRouteApi = getRouteApi('/_libraries')
-const library = getLibrary('store')
-
 export default function StoreVersionIndex() {
   const { sponsorsPromise } = librariesRouteApi.useLoaderData()
 

src/routes/_libraries/table.$version.index.tsx

@@ -15,7 +15,10 @@ import { getExampleStartingPath } from '~/utils/sandbox'
 import { LibraryFeatureHighlights } from '~/components/LibraryFeatureHighlights'
 import LandingPageGad from '~/components/LandingPageGad'
 import { PartnershipCallout } from '~/components/PartnershipCallout'
-import OpenSourceStats from '~/components/OpenSourceStats'
+import OpenSourceStats, { ossStatsQuery } from '~/components/OpenSourceStats'
+
+const librariesRouteApi = getRouteApi('/_libraries')
+const library = getLibrary('table')
 
 export const Route = createFileRoute({
   component: TableVersionIndex,
@@ -25,12 +28,11 @@ export const Route = createFileRoute({
       description: tableProject.description,
     }),
   }),
+  loader: async ({ context: { queryClient } }) => {
+    await queryClient.ensureQueryData(ossStatsQuery({ library }))
+  },
 })
 
-const librariesRouteApi = getRouteApi('/_libraries')
-
-const library = getLibrary('table')
-
 export default function TableVersionIndex() {
   const { sponsorsPromise } = librariesRouteApi.useLoaderData()
   const { version } = Route.useParams()

src/routes/_libraries/virtual.$version.index.tsx

@@ -14,7 +14,10 @@ import { Framework, getBranch } from '~/libraries'
 import { seo } from '~/utils/seo'
 import LandingPageGad from '~/components/LandingPageGad'
 import { PartnersSection } from '~/components/PartnersSection'
-import OpenSourceStats from '~/components/OpenSourceStats'
+import OpenSourceStats, { ossStatsQuery } from '~/components/OpenSourceStats'
+
+const librariesRouteApi = getRouteApi('/_libraries')
+const library = getLibrary('virtual')
 
 export const Route = createFileRoute({
   component: RouteComp,
@@ -24,12 +27,11 @@ export const Route = createFileRoute({
       description: virtualProject.description,
     }),
   }),
+  loader: async ({ context: { queryClient } }) => {
+    await queryClient.ensureQueryData(ossStatsQuery({ library }))
+  },
 })
 
-const librariesRouteApi = getRouteApi('/_libraries')
-
-const library = getLibrary('virtual')
-
 export default function RouteComp() {
   const { sponsorsPromise } = librariesRouteApi.useLoaderData()
   const { version } = Route.useParams()