use lazy imports in the routes

Author: david-crespo

app/components/SystemMetric.tsx

@@ -5,7 +5,7 @@
  *
  * Copyright Oxide Computer Company
  */
-import React, { Suspense, useMemo, useRef } from 'react'
+import { useMemo, useRef } from 'react'
 
 import {
   synthesizeData,
@@ -16,7 +16,7 @@ import {
 
 import { Spinner } from '~/ui/lib/Spinner'
 
-const TimeSeriesChart = React.lazy(() => import('./TimeSeriesChart'))
+import { TimeSeriesChart } from './TimeSeriesChart'
 
 // The difference between system metric and silo metric is
 //   1. different endpoints
@@ -99,20 +99,18 @@ export function SiloMetric({
         {(inRange.isPending || beforeStart.isPending) && <Spinner />}
       </h2>
       {/* TODO: proper skeleton for empty chart */}
-      <Suspense fallback={<div />}>
-        <div className="mt-3 h-[300px]">
-          <TimeSeriesChart
-            data={data}
-            title={title}
-            width={480}
-            height={240}
-            interpolation="stepAfter"
-            startTime={startTime}
-            endTime={endTime}
-            unit={unit !== 'count' ? unit : undefined}
-          />
-        </div>
-      </Suspense>
+      <div className="mt-3 h-[300px]">
+        <TimeSeriesChart
+          data={data}
+          title={title}
+          width={480}
+          height={240}
+          interpolation="stepAfter"
+          startTime={startTime}
+          endTime={endTime}
+          unit={unit !== 'count' ? unit : undefined}
+        />
+      </div>
     </div>
   )
 }
@@ -177,20 +175,18 @@ export function SystemMetric({
         {(inRange.isPending || beforeStart.isPending) && <Spinner />}
       </h2>
       {/* TODO: proper skeleton for empty chart */}
-      <Suspense fallback={<div />}>
-        <div className="mt-3 h-[300px]">
-          <TimeSeriesChart
-            data={data}
-            title={title}
-            width={480}
-            height={240}
-            interpolation="stepAfter"
-            startTime={startTime}
-            endTime={endTime}
-            unit={unit !== 'count' ? unit : undefined}
-          />
-        </div>
-      </Suspense>
+      <div className="mt-3 h-[300px]">
+        <TimeSeriesChart
+          data={data}
+          title={title}
+          width={480}
+          height={240}
+          interpolation="stepAfter"
+          startTime={startTime}
+          endTime={endTime}
+          unit={unit !== 'count' ? unit : undefined}
+        />
+      </div>
     </div>
   )
 }

app/components/TimeSeriesChart.tsx

@@ -165,9 +165,7 @@ const SkeletonMetric = ({
   </div>
 )
 
-// default export is most convenient for dynamic import
-// eslint-disable-next-line import/no-default-export
-export default function TimeSeriesChart({
+export function TimeSeriesChart({
   className,
   data: rawData,
   title,

app/components/oxql-metrics/OxqlMetric.tsx

@@ -11,27 +11,20 @@
  * https://github.com/oxidecomputer/omicron/tree/main/oximeter/oximeter/schema
  */
 
-import {
-  Children,
-  lazy,
-  Suspense,
-  useEffect,
-  useMemo,
-  useState,
-  type ReactNode,
-} from 'react'
+import { Children, useEffect, useMemo, useState, type ReactNode } from 'react'
 import type { LoaderFunctionArgs } from 'react-router'
 
 import { apiQueryClient, useApiQuery } from '@oxide/api'
 
 import { CopyCodeModal } from '~/components/CopyCode'
 import { MoreActionsMenu } from '~/components/MoreActionsMenu'
 import { getInstanceSelector } from '~/hooks/use-params'
-import { useMetricsContext } from '~/pages/project/instances/instance/tabs/MetricsTab'
+import { useMetricsContext } from '~/pages/project/instances/instance/tabs/common'
 import { LearnMore } from '~/ui/lib/SettingsGroup'
 import { classed } from '~/util/classed'
 import { links } from '~/util/links'
 
+import { TimeSeriesChart } from '../TimeSeriesChart'
 import { HighlightedOxqlQuery, toOxqlStr } from './HighlightedOxqlQuery'
 import {
   composeOxqlData,
@@ -42,8 +35,6 @@ import {
   type OxqlQuery,
 } from './util'
 
-const TimeSeriesChart = lazy(() => import('~/components/TimeSeriesChart'))
-
 export async function loader({ params }: LoaderFunctionArgs) {
   const { project, instance } = getInstanceSelector(params)
   await apiQueryClient.prefetchQuery('instanceView', {
@@ -124,20 +115,18 @@ export function OxqlMetric({ title, description, ...queryObj }: OxqlMetricProps)
         </CopyCodeModal>
       </div>
       <div className="px-6 py-5 pt-8">
-        <Suspense fallback={<div className="h-[300px]" />}>
-          <TimeSeriesChart
-            title={title}
-            startTime={startTime}
-            endTime={endTime}
-            unit={unitForSet}
-            data={data}
-            yAxisTickFormatter={yAxisTickFormatter}
-            width={480}
-            height={240}
-            hasBorder={false}
-            hasError={!!error}
-          />
-        </Suspense>
+        <TimeSeriesChart
+          title={title}
+          startTime={startTime}
+          endTime={endTime}
+          unit={unitForSet}
+          data={data}
+          yAxisTickFormatter={yAxisTickFormatter}
+          width={480}
+          height={240}
+          hasBorder={false}
+          hasError={!!error}
+        />
       </div>
     </div>
   )

app/pages/SiloUtilizationPage.tsx

@@ -26,16 +26,17 @@ import { bytesToGiB, bytesToTiB } from '~/util/units'
 
 const toListboxItem = (x: { name: string; id: string }) => ({ label: x.name, value: x.id })
 
-export async function loader() {
+export const handle = { crumb: 'Utilization' }
+
+export async function clientLoader() {
   await Promise.all([
     apiQueryClient.prefetchQuery('projectList', {}),
     apiQueryClient.prefetchQuery('utilizationView', {}),
   ])
   return null
 }
 
-Component.displayName = 'SiloUtilizationPage'
-export function Component() {
+export default function SiloUtilizationPage() {
   const { me } = useCurrentUser()
 
   const siloId = me.siloId

app/pages/project/instances/instance/tabs/MetricsTab.tsx

@@ -7,36 +7,19 @@
  */
 
 import { useIsFetching } from '@tanstack/react-query'
-import { createContext, useContext, useState, type ReactNode } from 'react'
+import { useState } from 'react'
 
 import { useDateTimeRangePicker } from '~/components/form/fields/DateTimeRangePicker'
 import { useIntervalPicker } from '~/components/RefetchIntervalPicker'
 import { RouteTabs, Tab } from '~/components/RouteTabs'
 import { useInstanceSelector } from '~/hooks/use-params'
-import { invariant } from '~/util/invariant'
 import { pb } from '~/util/path-builder'
 
-type MetricsContextValue = {
-  startTime: Date
-  endTime: Date
-  dateTimeRangePicker: ReactNode
-  intervalPicker: ReactNode
-  setIsIntervalPickerEnabled: (enabled: boolean) => void
-}
-
-/**
- * Using context lets the selected time window persist across route tab navs.
- */
-const MetricsContext = createContext<MetricsContextValue | null>(null)
+import { MetricsContext } from './common'
 
-// this lets us init with a null value but rule it out in the consumers
-export function useMetricsContext() {
-  const value = useContext(MetricsContext)
-  invariant(value, 'useMetricsContext can only be called inside a MetricsContext')
-  return value
-}
+export const handle = { crumb: 'Metrics' }
 
-export const MetricsTab = () => {
+export default function MetricsTab() {
   const { project, instance } = useInstanceSelector()
   // this ensures the interval picker (which defaults to reloading every 10s) only kicks in
   // once some initial data have loaded, to prevent requests from stacking up

app/pages/project/instances/instance/tabs/MetricsTab/CpuMetricsTab.tsx

@@ -19,10 +19,11 @@ import {
 import { useInstanceSelector } from '~/hooks/use-params'
 import { Listbox } from '~/ui/lib/Listbox'
 
-import { useMetricsContext } from '../MetricsTab'
+import { useMetricsContext } from '../common'
 
-Component.displayName = 'CpuMetricsTab'
-export function Component() {
+export const handle = { crumb: 'CPU' }
+
+export default function CpuMetricsTab() {
   const { project, instance } = useInstanceSelector()
   const { data: instanceData } = usePrefetchedApiQuery('instanceView', {
     path: { instance },

app/pages/project/instances/instance/tabs/MetricsTab/DiskMetricsTab.tsx

@@ -24,9 +24,9 @@ import { EmptyMessage } from '~/ui/lib/EmptyMessage'
 import { Listbox } from '~/ui/lib/Listbox'
 import { TableEmptyBox } from '~/ui/lib/Table'
 
-import { useMetricsContext } from '../MetricsTab'
+import { useMetricsContext } from '../common'
 
-export async function loader({ params }: LoaderFunctionArgs) {
+export async function clientLoader({ params }: LoaderFunctionArgs) {
   const { project, instance } = getInstanceSelector(params)
   await apiQueryClient.prefetchQuery('instanceDiskList', {
     path: { instance },
@@ -38,8 +38,9 @@ export async function loader({ params }: LoaderFunctionArgs) {
 // out here so we don't have to memoize it
 const groupByAttachedInstanceId = { cols: ['attached_instance_id'], op: 'sum' } as const
 
-Component.displayName = 'DiskMetricsTab'
-export function Component() {
+export const handle = { crumb: 'Disk' }
+
+export default function DiskMetricsTab() {
   const { project, instance } = useInstanceSelector()
   const { data: disks } = usePrefetchedApiQuery('instanceDiskList', {
     path: { instance },

app/pages/project/instances/instance/tabs/MetricsTab/NetworkMetricsTab.tsx

@@ -28,9 +28,9 @@ import { Listbox } from '~/ui/lib/Listbox'
 import { TableEmptyBox } from '~/ui/lib/Table'
 import { ALL_ISH } from '~/util/consts'
 
-import { useMetricsContext } from '../MetricsTab'
+import { useMetricsContext } from '../common'
 
-export async function loader({ params }: LoaderFunctionArgs) {
+export async function clientLoader({ params }: LoaderFunctionArgs) {
   const { project, instance } = getInstanceSelector(params)
   await apiQueryClient.prefetchQuery('instanceNetworkInterfaceList', {
     query: { project, instance, limit: ALL_ISH },
@@ -40,8 +40,9 @@ export async function loader({ params }: LoaderFunctionArgs) {
 
 const groupByInstanceId = { cols: ['instance_id'], op: 'sum' } as const
 
-Component.displayName = 'NetworkMetricsTab'
-export function Component() {
+export const handle = { crumb: 'Network' }
+
+export default function NetworkMetricsTab() {
   const { project, instance } = useInstanceSelector()
   const { data: nics } = usePrefetchedApiQuery('instanceNetworkInterfaceList', {
     query: { project, instance, limit: ALL_ISH },

app/pages/project/instances/instance/tabs/common.tsx

@@ -5,7 +5,10 @@
  *
  * Copyright Oxide Computer Company
  */
+import { createContext, ReactNode, useContext } from 'react'
+
 import { intersperse } from '~/util/array'
+import { invariant } from '~/util/invariant'
 
 const white = (s: string) => (
   <span key={s} className="text-raise">
@@ -15,3 +18,23 @@ const white = (s: string) => (
 
 export const fancifyStates = (states: string[]) =>
   intersperse(states.map(white), <>, </>, <> or </>)
+
+type MetricsContextValue = {
+  startTime: Date
+  endTime: Date
+  dateTimeRangePicker: ReactNode
+  intervalPicker: ReactNode
+  setIsIntervalPickerEnabled: (enabled: boolean) => void
+}
+
+/**
+ * Using context lets the selected time window persist across route tab navs.
+ */
+export const MetricsContext = createContext<MetricsContextValue | null>(null)
+
+// this lets us init with a null value but rule it out in the consumers
+export function useMetricsContext() {
+  const value = useContext(MetricsContext)
+  invariant(value, 'useMetricsContext can only be called inside a MetricsContext')
+  return value
+}

app/pages/system/UtilizationPage.tsx

@@ -44,16 +44,17 @@ const siloUtilList = getListQFn('siloUtilizationList', {
   query: { limit: ALL_ISH },
 })
 
-export async function loader() {
+export async function clientLoader() {
   await Promise.all([
     queryClient.prefetchQuery(siloList.optionsFn()),
     queryClient.prefetchQuery(siloUtilList.optionsFn()),
   ])
   return null
 }
 
-Component.displayName = 'SystemUtilizationPage'
-export function Component() {
+export const handle = { crumb: 'Utilization' }
+
+export default function SystemUtilizationPage() {
   const { data: siloUtilizationList } = usePrefetchedQuery(siloUtilList.optionsFn())
 
   const { totalAllocated, totalProvisioned } = totalUtilization(siloUtilizationList.items)