Using RR loaders all over for clean page transitions

app/components/Breadcrumbs.tsx

@@ -19,7 +19,8 @@ const useCrumbs = () =>
   useMatches()
     .map((m) => {
       invariant(
-        !m.handle || ['string', 'function'].includes(typeof m.handle.crumb),
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        !m.handle || ['string', 'function'].includes(typeof (m.handle as any).crumb),
         `Route crumb must be a string or function if present. Check Route for ${m.pathname}.`
       )
       return m as ValidatedMatch

app/components/ErrorBoundary.tsx

@@ -26,6 +26,7 @@ export const ErrorBoundary = (props: { children: React.ReactNode }) => (
 )
 
 export function RouterDataErrorBoundary() {
-  const error = useRouteError()
+  // TODO: validate this unknown at runtime _before_ passing to ErrorFallback
+  const error = useRouteError() as Props['error']
   return <ErrorFallback error={error} />
 }

app/hooks/use-params.ts

@@ -5,6 +5,27 @@ import invariant from 'tiny-invariant'
 const err = (param: string) =>
   `Param '${param}' not found in route. You might be rendering a component under the wrong route.`
 
+export const requireParams =
+  <K extends string = never>(...requiredKeys: K[]) =>
+  (params: Readonly<Params<string>>) => {
+    const requiredParams: { [k in K]?: string } = {}
+    if (process.env.NODE_ENV !== 'production') {
+      for (const k of requiredKeys) {
+        const value = params[k]
+        invariant(k in params && value, err(k))
+        requiredParams[k] = value
+      }
+    }
+    return requiredParams as { readonly [k in K]: string }
+  }
+
+export const requireOrgParams = requireParams('orgName')
+export const requireProjectParams = requireParams('orgName', 'projectName')
+export const requireInstanceParams = requireParams('orgName', 'projectName', 'instanceName')
+export const requireVpcParams = requireParams('orgName', 'projectName', 'vpcName')
+
+export const useVpcParams = () => requireVpcParams(useParams())
+
 /**
  * Wrapper for RR's `useParams` that guarantees (in dev) that the specified
  * params are present. No keys besides those specified are present on the result
@@ -13,17 +34,7 @@ const err = (param: string) =>
 // default of never is required to prevent the highly undesirable property that if
 // you don't pass any arguments, the result object thinks every property is defined
 export function useRequiredParams<K extends string = never>(...requiredKeys: K[]) {
-  const params = useParams()
-  // same as below except we build an object with only the specified keys
-  const requiredParams: { [k in K]?: string } = {}
-  if (process.env.NODE_ENV !== 'production') {
-    for (const k of requiredKeys) {
-      const value = params[k]
-      invariant(k in params && value, err(k))
-      requiredParams[k] = value
-    }
-  }
-  return requiredParams as { readonly [k in K]: string }
+  return requireParams(...requiredKeys)(useParams())
 }
 
 /**

app/main.tsx

@@ -1,7 +1,8 @@
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { QueryClientProvider } from '@tanstack/react-query'
 import { StrictMode } from 'react'
 import ReactDOM from 'react-dom'
 
+import { queryClient } from '@oxide/api'
 import { SkipLink } from '@oxide/ui'
 
 import { ErrorBoundary } from './components/ErrorBoundary'
@@ -18,16 +19,6 @@ if (process.env.SHA) {
   )
 }
 
-const queryClient = new QueryClient({
-  defaultOptions: {
-    queries: {
-      retry: false,
-      staleTime: 2000,
-      networkMode: 'offlineFirst',
-    },
-  },
-})
-
 function render() {
   ReactDOM.render(
     <StrictMode>

app/pages/OrgAccessPage.tsx

@@ -1,8 +1,10 @@
 import { createColumnHelper } from '@tanstack/react-table'
 import { getCoreRowModel, useReactTable } from '@tanstack/react-table'
 import { useMemo, useState } from 'react'
+import type { LoaderFunctionArgs } from 'react-router-dom'
 
 import {
+  apiQueryClient,
   orgRoleOrder,
   setUserRole,
   useApiMutation,
@@ -24,9 +26,7 @@ import {
 } from '@oxide/ui'
 
 import { OrgAccessAddUserSideModal, OrgAccessEditUserSideModal } from 'app/forms/org-access'
-import { useRequiredParams } from 'app/hooks'
-
-type UserRow = UserAccessRow<OrganizationRole>
+import { requireOrgParams, useRequiredParams } from 'app/hooks'
 
 const EmptyState = ({ onClick }: { onClick: () => void }) => (
   <TableEmptyBox>
@@ -40,9 +40,19 @@ const EmptyState = ({ onClick }: { onClick: () => void }) => (
   </TableEmptyBox>
 )
 
+OrgAccessPage.loader = async ({ params }: LoaderFunctionArgs) => {
+  await Promise.all([
+    apiQueryClient.prefetchQuery('organizationPolicyView', requireOrgParams(params)),
+    // used in useUserAccessRows to resolve user names
+    apiQueryClient.prefetchQuery('userList', { limit: 200 }),
+  ])
+}
+
+type UserRow = UserAccessRow<OrganizationRole>
+
 const colHelper = createColumnHelper<UserRow>()
 
-export const OrgAccessPage = () => {
+export function OrgAccessPage() {
   const [addModalOpen, setAddModalOpen] = useState(false)
   const [editingUserRow, setEditingUserRow] = useState<UserRow | null>(null)
   const orgParams = useRequiredParams('orgName')

app/pages/OrgsPage.tsx

@@ -2,6 +2,7 @@ import { useMemo } from 'react'
 import { Link, useLocation, useNavigate } from 'react-router-dom'
 
 import type { Organization } from '@oxide/api'
+import { apiQueryClient } from '@oxide/api'
 import { useApiQueryClient } from '@oxide/api'
 import { useApiMutation, useApiQuery } from '@oxide/api'
 import type { MenuAction } from '@oxide/table'
@@ -30,11 +31,15 @@ const EmptyState = () => (
   />
 )
 
+OrgsPage.loader = async () => {
+  await apiQueryClient.prefetchQuery('organizationList', { limit: 10 })
+}
+
 interface OrgsPageProps {
   modal?: 'createOrg' | 'editOrg'
 }
 
-const OrgsPage = ({ modal }: OrgsPageProps) => {
+export default function OrgsPage({ modal }: OrgsPageProps) {
   const navigate = useNavigate()
   const location = useLocation()
 
@@ -107,5 +112,3 @@ const OrgsPage = ({ modal }: OrgsPageProps) => {
     </>
   )
 }
-
-export default OrgsPage

app/pages/ProjectsPage.tsx

@@ -1,7 +1,9 @@
 import { useMemo } from 'react'
+import type { LoaderFunctionArgs } from 'react-router-dom'
 import { Link, useLocation, useNavigate } from 'react-router-dom'
 
 import type { Project } from '@oxide/api'
+import { apiQueryClient } from '@oxide/api'
 import { useApiMutation, useApiQuery, useApiQueryClient } from '@oxide/api'
 import type { MenuAction } from '@oxide/table'
 import { DateCell, linkCell, useQueryTable } from '@oxide/table'
@@ -17,7 +19,7 @@ import {
 import CreateProjectSideModalForm from 'app/forms/project-create'
 import EditProjectSideModalForm from 'app/forms/project-edit'
 
-import { useQuickActions, useRequiredParams } from '../hooks'
+import { requireOrgParams, useQuickActions, useRequiredParams } from '../hooks'
 
 const EmptyState = () => (
   <EmptyMessage
@@ -29,11 +31,18 @@ const EmptyState = () => (
   />
 )
 
+ProjectsPage.loader = async ({ params }: LoaderFunctionArgs) => {
+  await apiQueryClient.prefetchQuery('projectList', {
+    ...requireOrgParams(params),
+    limit: 10,
+  })
+}
+
 interface ProjectsPageProps {
   modal?: 'createProject' | 'editProject'
 }
 
-const ProjectsPage = ({ modal }: ProjectsPageProps) => {
+export default function ProjectsPage({ modal }: ProjectsPageProps) {
   const navigate = useNavigate()
   const location = useLocation()
 
@@ -113,5 +122,3 @@ const ProjectsPage = ({ modal }: ProjectsPageProps) => {
     </>
   )
 }
-
-export default ProjectsPage

app/pages/project/access/ProjectAccessPage.tsx

@@ -1,8 +1,10 @@
 import { createColumnHelper } from '@tanstack/react-table'
 import { getCoreRowModel, useReactTable } from '@tanstack/react-table'
 import { useMemo, useState } from 'react'
+import type { LoaderFunctionArgs } from 'react-router-dom'
 
 import {
+  apiQueryClient,
   projectRoleOrder,
   setUserRole,
   useApiMutation,
@@ -27,7 +29,7 @@ import {
   ProjectAccessAddUserSideModal,
   ProjectAccessEditUserSideModal,
 } from 'app/forms/project-access'
-import { useRequiredParams } from 'app/hooks'
+import { requireProjectParams, useRequiredParams } from 'app/hooks'
 
 const EmptyState = ({ onClick }: { onClick: () => void }) => (
   <TableEmptyBox>
@@ -41,11 +43,19 @@ const EmptyState = ({ onClick }: { onClick: () => void }) => (
   </TableEmptyBox>
 )
 
+ProjectAccessPage.loader = async ({ params }: LoaderFunctionArgs) => {
+  await Promise.all([
+    apiQueryClient.prefetchQuery('projectPolicyView', requireProjectParams(params)),
+    // used in useUserAccessRows to resolve user names
+    apiQueryClient.prefetchQuery('userList', { limit: 200 }),
+  ])
+}
+
 type UserRow = UserAccessRow<ProjectRole>
 
 const colHelper = createColumnHelper<UserRow>()
 
-export const ProjectAccessPage = () => {
+export function ProjectAccessPage() {
   const [addModalOpen, setAddModalOpen] = useState(false)
   const [editingUserRow, setEditingUserRow] = useState<UserRow | null>(null)
   const projectParams = useRequiredParams('orgName', 'projectName')

app/pages/project/disks/DisksPage.tsx

@@ -1,6 +1,8 @@
+import type { LoaderFunctionArgs } from 'react-router-dom'
 import { Link, useNavigate } from 'react-router-dom'
 
 import type { Disk } from '@oxide/api'
+import { apiQueryClient } from '@oxide/api'
 import { useApiMutation, useApiQueryClient } from '@oxide/api'
 import { useApiQuery } from '@oxide/api'
 import type { MenuAction } from '@oxide/table'
@@ -18,7 +20,7 @@ import {
 
 import { DiskStatusBadge } from 'app/components/StatusBadge'
 import CreateDiskSideModalForm from 'app/forms/disk-create'
-import { useRequiredParams } from 'app/hooks'
+import { requireProjectParams, useRequiredParams } from 'app/hooks'
 
 function AttachedInstance(props: {
   orgName: string
@@ -50,6 +52,13 @@ interface DisksPageProps {
   modal?: 'createDisk'
 }
 
+DisksPage.loader = async ({ params }: LoaderFunctionArgs) => {
+  await apiQueryClient.prefetchQuery('diskList', {
+    ...requireProjectParams(params),
+    limit: 10,
+  })
+}
+
 export function DisksPage({ modal }: DisksPageProps) {
   const navigate = useNavigate()
 

app/pages/project/images/ImagesPage.tsx

@@ -1,7 +1,10 @@
+import type { LoaderFunctionArgs } from 'react-router-dom'
+
+import { apiQueryClient } from '@oxide/api'
 import { DateCell, SizeCell, useQueryTable } from '@oxide/table'
 import { EmptyMessage, Images24Icon, PageHeader, PageTitle } from '@oxide/ui'
 
-import { useRequiredParams } from 'app/hooks'
+import { requireProjectParams, useRequiredParams } from 'app/hooks'
 
 const EmptyState = () => (
   <EmptyMessage
@@ -13,7 +16,14 @@ const EmptyState = () => (
   />
 )
 
-export const ImagesPage = () => {
+ImagesPage.loader = async ({ params }: LoaderFunctionArgs) => {
+  await apiQueryClient.prefetchQuery('imageList', {
+    ...requireProjectParams(params),
+    limit: 10,
+  })
+}
+
+export function ImagesPage() {
   const projectParams = useRequiredParams('orgName', 'projectName')
   const { Table, Column } = useQueryTable('imageList', projectParams)
   return (

app/pages/project/instances/InstancesPage.tsx

@@ -1,7 +1,8 @@
 import { useMemo } from 'react'
+import type { LoaderFunctionArgs } from 'react-router-dom'
 import { Link, useNavigate } from 'react-router-dom'
 
-import { useApiQuery, useApiQueryClient } from '@oxide/api'
+import { apiQueryClient, useApiQuery, useApiQueryClient } from '@oxide/api'
 import {
   DateCell,
   InstanceResourceCell,
@@ -18,7 +19,7 @@ import {
   buttonStyle,
 } from '@oxide/ui'
 
-import { useQuickActions, useRequiredParams } from 'app/hooks'
+import { requireProjectParams, useQuickActions, useRequiredParams } from 'app/hooks'
 
 import { useMakeInstanceActions } from './actions'
 
@@ -32,7 +33,14 @@ const EmptyState = () => (
   />
 )
 
-export const InstancesPage = () => {
+InstancesPage.loader = async ({ params }: LoaderFunctionArgs) => {
+  await apiQueryClient.prefetchQuery('instanceList', {
+    ...requireProjectParams(params),
+    limit: 10,
+  })
+}
+
+export function InstancesPage() {
   const projectParams = useRequiredParams('orgName', 'projectName')
   const { orgName, projectName } = projectParams
 

app/pages/project/instances/instance/InstancePage.tsx

@@ -1,15 +1,16 @@
 import filesize from 'filesize'
 import { memo, useMemo } from 'react'
+import type { LoaderFunctionArgs } from 'react-router-dom'
 import { useNavigate } from 'react-router-dom'
 
-import { useApiQuery, useApiQueryClient } from '@oxide/api'
+import { apiQueryClient, useApiQuery, useApiQueryClient } from '@oxide/api'
 import { Instances24Icon, PageHeader, PageTitle, PropertiesTable, Tab } from '@oxide/ui'
 import { pick } from '@oxide/util'
 
 import { MoreActionsMenu } from 'app/components/MoreActionsMenu'
 import { InstanceStatusBadge } from 'app/components/StatusBadge'
 import { Tabs } from 'app/components/Tabs'
-import { useQuickActions, useRequiredParams } from 'app/hooks'
+import { requireInstanceParams, useQuickActions, useRequiredParams } from 'app/hooks'
 
 import { useMakeInstanceActions } from '../actions'
 import { MetricsTab } from './tabs/MetricsTab'
@@ -38,7 +39,11 @@ const InstanceTabs = memo(() => (
   </Tabs>
 ))
 
-export const InstancePage = () => {
+InstancePage.loader = async ({ params }: LoaderFunctionArgs) => {
+  await apiQueryClient.prefetchQuery('instanceView', requireInstanceParams(params))
+}
+
+export function InstancePage() {
   const instanceParams = useRequiredParams('orgName', 'projectName', 'instanceName')
 
   const navigate = useNavigate()