prefetch first page

Author: drankou

src/app/dashboard/[teamSlug]/templates/(tabs)/list/page.tsx

@@ -1,11 +1,30 @@
 import { Suspense } from 'react'
 import LoadingLayout from '@/features/dashboard/loading-layout'
+import {
+  TEMPLATES_DEFAULT_SORT,
+  TEMPLATES_PAGE_SIZE,
+} from '@/features/dashboard/templates/list/constants'
 import TemplatesTable from '@/features/dashboard/templates/list/table'
+import { HydrateClient, prefetch, trpc } from '@/trpc/server'
+
+export default async function TemplatesListPage({
+  params,
+}: PageProps<'/dashboard/[teamSlug]/templates/list'>) {
+  const { teamSlug } = await params
+
+  prefetch(
+    trpc.templates.getTemplates.infiniteQueryOptions({
+      teamSlug,
+      limit: TEMPLATES_PAGE_SIZE,
+      sort: TEMPLATES_DEFAULT_SORT,
+    })
+  )
 
-export default function TemplatesListPage() {
   return (
-    <Suspense fallback={<LoadingLayout />}>
-      <TemplatesTable />
-    </Suspense>
+    <HydrateClient>
+      <Suspense fallback={<LoadingLayout />}>
+        <TemplatesTable />
+      </Suspense>
+    </HydrateClient>
   )
 }

src/features/dashboard/templates/list/constants.ts

@@ -0,0 +1,16 @@
+import type { SortingState } from '@tanstack/react-table'
+import type { TemplatesSort } from '@/core/modules/templates/models'
+
+export const TEMPLATES_PAGE_SIZE = 50
+
+export const TEMPLATES_DEFAULT_SORT_COLUMN_ID = 'createdAt'
+export const TEMPLATES_DEFAULT_SORT_BASE = 'created_at'
+export const TEMPLATES_DEFAULT_SORT_DESC = true
+
+export const TEMPLATES_DEFAULT_SORT: TemplatesSort = `${TEMPLATES_DEFAULT_SORT_BASE}_${
+  TEMPLATES_DEFAULT_SORT_DESC ? 'desc' : 'asc'
+}`
+
+export const TEMPLATES_DEFAULT_SORTING: SortingState = [
+  { id: TEMPLATES_DEFAULT_SORT_COLUMN_ID, desc: TEMPLATES_DEFAULT_SORT_DESC },
+]

src/features/dashboard/templates/list/stores/table-store.ts

@@ -2,6 +2,7 @@ import type { OnChangeFn, SortingState } from '@tanstack/react-table'
 import { create } from 'zustand'
 import { createJSONStorage, persist } from 'zustand/middleware'
 import { createHashStorage } from '@/lib/utils/store'
+import { TEMPLATES_DEFAULT_SORTING } from '../constants'
 import { trackTemplateTableInteraction } from '../table-config'
 
 interface TemplateTableState {
@@ -33,7 +34,7 @@ type Store = TemplateTableState & TemplateTableActions
 
 const initialState: TemplateTableState = {
   // Table state
-  sorting: [{ id: 'updatedAt', desc: true }],
+  sorting: TEMPLATES_DEFAULT_SORTING,
   globalFilter: '',
   // Filter state
   cpuCount: undefined,

src/features/dashboard/templates/list/table.tsx

@@ -31,13 +31,16 @@ import {
 import ErrorBoundary from '@/ui/error'
 import HelpTooltip from '@/ui/help-tooltip'
 import { SIDEBAR_TRANSITION_CLASSNAMES } from '@/ui/primitives/sidebar'
+import {
+  TEMPLATES_DEFAULT_SORT_BASE,
+  TEMPLATES_DEFAULT_SORT_DESC,
+  TEMPLATES_PAGE_SIZE,
+} from './constants'
 import TemplatesHeader from './header'
 import { useTemplateTableStore } from './stores/table-store'
 import { TemplatesTableBody as TableBody } from './table-body'
 import { fallbackData, templatesTableConfig, useColumns } from './table-config'
 
-const PAGE_SIZE = 50
-
 const COLUMN_TO_SORT_BASE: Record<string, string> = {
   name: 'name',
   cpuCount: 'cpu_count',
@@ -59,9 +62,12 @@ export default function TemplatesTable() {
   // Derive the single server sort token from the active sort column + direction.
   const sortColumn = sorting[0]
   const sortBase =
-    (sortColumn && COLUMN_TO_SORT_BASE[sortColumn.id]) ?? 'created_at'
-  const sort =
-    `${sortBase}_${sortColumn?.desc === false ? 'asc' : 'desc'}` as TemplatesSort
+    (sortColumn && COLUMN_TO_SORT_BASE[sortColumn.id]) ??
+    TEMPLATES_DEFAULT_SORT_BASE
+  const isDesc = sortColumn
+    ? sortColumn.desc !== false
+    : TEMPLATES_DEFAULT_SORT_DESC
+  const sort = `${sortBase}_${isDesc ? 'desc' : 'asc'}` as TemplatesSort
 
   const {
     data,
@@ -74,7 +80,7 @@ export default function TemplatesTable() {
     trpc.templates.getTemplates.infiniteQueryOptions(
       {
         teamSlug,
-        limit: PAGE_SIZE,
+        limit: TEMPLATES_PAGE_SIZE,
         cpuCount,
         memoryMB,
         public: isPublic,