improve: inspect fetch caching and streaming structure

Author: ben-fornefeld

src/app/dashboard/[teamIdOrSlug]/sandboxes/[sandboxId]/inspect/loading.tsx

@@ -0,0 +1 @@
+export { default } from '@/features/dashboard/loading-layout'

src/app/dashboard/[teamIdOrSlug]/sandboxes/[sandboxId]/inspect/page.tsx

@@ -5,6 +5,9 @@ import { resolveTeamIdInServerComponent } from '@/lib/utils/server'
 import { getSandboxRoot } from '@/server/sandboxes/get-sandbox-root'
 import { notFound } from 'next/navigation'
 
+export const dynamic = 'force-dynamic'
+export const fetchCache = 'force-no-store'
+
 export default async function SandboxInspectPage({
   params,
 }: {

src/features/dashboard/sandboxes/table-row.tsx

@@ -5,38 +5,33 @@ import { flexRender } from '@tanstack/react-table'
 import { Sandbox } from '@/types/api'
 import { useParams, useRouter, useSelectedLayoutSegment } from 'next/navigation'
 import { PROTECTED_URLS } from '@/configs/urls'
+import Link from 'next/link'
 
 interface TableRowProps {
   row: Row<Sandbox>
 }
 
 export const TableRow = memo(function TableRow({ row }: TableRowProps) {
-  const router = useRouter()
   const { teamIdOrSlug } = useParams()
+  const sandboxId = `${row.original.sandboxID}-${row.original.clientID}`
 
   if (!teamIdOrSlug || typeof teamIdOrSlug !== 'string') {
     return null
   }
 
   return (
-    <DataTableRow
-      key={row.id}
-      onClick={() => {
-        router.push(
-          PROTECTED_URLS.SANDBOX_INSPECT(
-            teamIdOrSlug,
-            `${row.original.sandboxID}-${row.original.clientID}`
-          )
-        )
-      }}
-      className="cursor-pointer"
-      isSelected={row.getIsSelected()}
-    >
-      {row.getVisibleCells().map((cell) => (
-        <DataTableCell key={cell.id} cell={cell}>
-          {flexRender(cell.column.columnDef.cell, cell.getContext())}
-        </DataTableCell>
-      ))}
-    </DataTableRow>
+    <Link href={PROTECTED_URLS.SANDBOX_INSPECT(teamIdOrSlug, sandboxId)}>
+      <DataTableRow
+        key={row.id}
+        className="hover:bg-bg-100 cursor-pointer"
+        isSelected={row.getIsSelected()}
+      >
+        {row.getVisibleCells().map((cell) => (
+          <DataTableCell key={cell.id} cell={cell}>
+            {flexRender(cell.column.columnDef.cell, cell.getContext())}
+          </DataTableCell>
+        ))}
+      </DataTableRow>
+    </Link>
   )
 })