hella basic refetch interval control

Author: david-crespo

app/hooks/index.ts

@@ -3,3 +3,4 @@ export * from './use-key'
 export * from './use-params'
 export * from './use-toast'
 export * from './use-reduce-motion'
+export * from './use-refetch-interval'

app/hooks/use-refetch-interval.tsx

@@ -0,0 +1,35 @@
+import { useState } from 'react'
+
+import { Listbox } from '@oxide/ui'
+
+type RefetchIntervalKey = 'Off' | '5s' | '10s' | '1m' | '2m' | '5m'
+type RefetchInterval = false | 5_000 | 10_000 | 60_000 | 120_000 | 300_000
+
+const intervalValues: Record<RefetchIntervalKey, RefetchInterval> = {
+  Off: false,
+  '5s': 5_000,
+  '10s': 10_000,
+  '1m': 60_000,
+  '2m': 120_000,
+  '5m': 300_000,
+}
+
+const intervalItems = Object.keys(intervalValues).map((k) => ({ label: k, value: k }))
+
+export function useRefetchInterval(initialKey: RefetchIntervalKey = 'Off') {
+  const [intervalKey, setIntervalKey] = useState<RefetchIntervalKey>(initialKey)
+  return {
+    refetchInterval: intervalValues[intervalKey],
+    intervalListbox: (
+      <Listbox
+        items={intervalItems}
+        defaultValue={initialKey}
+        onChange={(item) => {
+          if (item) {
+            setIntervalKey(item.value as RefetchIntervalKey)
+          }
+        }}
+      />
+    ),
+  }
+}

app/pages/project/instances/InstancesPage.tsx

@@ -19,7 +19,12 @@ import {
   buttonStyle,
 } from '@oxide/ui'
 
-import { requireProjectParams, useProjectParams, useQuickActions } from 'app/hooks'
+import {
+  requireProjectParams,
+  useProjectParams,
+  useQuickActions,
+  useRefetchInterval,
+} from 'app/hooks'
 import { pb } from 'app/util/path-builder'
 
 import { useMakeInstanceActions } from './actions'
@@ -73,11 +78,13 @@ export function InstancesPage() {
     )
   )
 
+  const { refetchInterval, intervalListbox } = useRefetchInterval('10s')
+
   const { Table, Column } = useQueryTable(
     'instanceList',
     { path: projectParams },
     {
-      refetchInterval: 5000,
+      refetchInterval,
       keepPreviousData: true,
     }
   )
@@ -90,6 +97,7 @@ export function InstancesPage() {
         <PageTitle icon={<Instances24Icon />}>Instances</PageTitle>
       </PageHeader>
       <TableActions>
+        {intervalListbox}
         <Link
           to={pb.instanceNew({ orgName, projectName })}
           className={buttonStyle({ size: 'sm', variant: 'default' })}