don't poll on list view, use spinner with tooltip as loading indicator

oxidecomputer · Aug 16, 2024 · 7d11d67 · 7d11d67
1 parent 3ebb3f9
commit 7d11d67
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 28 deletions.
diff --git a/app/pages/project/instances/InstancesPage.tsx b/app/pages/project/instances/InstancesPage.tsx
@@ -9,10 +9,14 @@ import { createColumnHelper } from '@tanstack/react-table'
 import { useMemo } from 'react'
 import { useNavigate, type LoaderFunctionArgs } from 'react-router-dom'
 
-import { apiQueryClient, usePrefetchedApiQuery, type Instance } from '@oxide/api'
+import {
+  apiQueryClient,
+  useApiQueryClient,
+  usePrefetchedApiQuery,
+  type Instance,
+} from '@oxide/api'
 import { Instances16Icon, Instances24Icon } from '@oxide/design-system/icons/react'
 
-import { instanceTransitioning } from '~/api/util'
 import { DocsPopover } from '~/components/DocsPopover'
 import { RefreshButton } from '~/components/RefreshButton'
 import { getProjectSelector, useProjectSelector, useQuickActions } from '~/hooks'
@@ -26,7 +30,6 @@ import { CreateLink } from '~/ui/lib/CreateButton'
 import { EmptyMessage } from '~/ui/lib/EmptyMessage'
 import { PageHeader, PageTitle } from '~/ui/lib/PageHeader'
 import { TableActions } from '~/ui/lib/Table'
-import { useInterval } from '~/ui/lib/use-interval'
 import { docLinks } from '~/util/links'
 import { pb } from '~/util/path-builder'
 
@@ -52,11 +55,12 @@ InstancesPage.loader = async ({ params }: LoaderFunctionArgs) => {
   return null
 }
 
-const refetchInstances = () => apiQueryClient.invalidateQueries('instanceList')
-
 export function InstancesPage() {
   const { project } = useProjectSelector()
 
+  const queryClient = useApiQueryClient()
+  const refetchInstances = () => queryClient.invalidateQueries('instanceList')
+
   const makeActions = useMakeInstanceActions(
     { project },
     { onSuccess: refetchInstances, onDelete: refetchInstances }
@@ -66,13 +70,6 @@ export function InstancesPage() {
     query: { project, limit: PAGE_SIZE },
   })
 
-  // if any instance in the list is transitioning, poll
-  // TODO: figure out this logic. polling if any instance is transitioning might be excessive
-  useInterval({
-    fn: () => apiQueryClient.invalidateQueries('instanceList'),
-    delay: instances.items.some(instanceTransitioning) ? 1000 : null,
-  })
-
   const navigate = useNavigate()
   useQuickActions(
     useMemo(

diff --git a/app/pages/project/instances/instance/InstancePage.tsx b/app/pages/project/instances/instance/InstancePage.tsx
@@ -29,8 +29,9 @@ import { EmptyCell } from '~/table/cells/EmptyCell'
 import { DateTime } from '~/ui/lib/DateTime'
 import { PageHeader, PageTitle } from '~/ui/lib/PageHeader'
 import { PropertiesTable } from '~/ui/lib/PropertiesTable'
+import { Spinner } from '~/ui/lib/Spinner'
+import { Tooltip } from '~/ui/lib/Tooltip'
 import { Truncate } from '~/ui/lib/Truncate'
-import { useInterval } from '~/ui/lib/use-interval'
 import { docLinks } from '~/util/links'
 import { pb } from '~/util/path-builder'
 
@@ -96,16 +97,19 @@ export function InstancePage() {
     onDelete: () => navigate(pb.instances(instanceSelector)),
   })
 
-  const { data: instance } = usePrefetchedApiQuery('instanceView', {
-    path: { instance: instanceSelector.instance },
-    query: { project: instanceSelector.project },
-  })
+  const { data: instance } = usePrefetchedApiQuery(
+    'instanceView',
+    {
+      path: { instance: instanceSelector.instance },
+      query: { project: instanceSelector.project },
+    },
+    {
+      refetchInterval: ({ state: { data: instance } }) =>
+        instance && instanceTransitioning(instance) ? 1000 : false,
+    }
+  )
 
-  const shouldPoll = instanceTransitioning(instance)
-  useInterval({
-    fn: () => apiQueryClient.invalidateQueries('instanceView'),
-    delay: shouldPoll ? 1000 : null,
-  })
+  const polling = instanceTransitioning(instance)
 
   const { data: nics } = usePrefetchedApiQuery('instanceNetworkInterfaceList', {
     query: {
@@ -165,12 +169,16 @@ export function InstancePage() {
             <span className="ml-1 text-quaternary"> {memory.unit}</span>
           </PropertiesTable.Row>
           <PropertiesTable.Row label="status">
-            <InstanceStatusBadge status={instance.runState} />
-            {shouldPoll && (
-              <div className="ml-4 flex items-center text-sans-sm text-tertiary">
-                Polling... (ANIMATE ME INSTEAD)
-              </div>
-            )}
+            <div className="flex">
+              <InstanceStatusBadge status={instance.runState} />
+              {polling && (
+                <Tooltip content="Auto-refreshing while state changes" delay={150}>
+                  <button type="button">
+                    <Spinner className="ml-2" />
+                  </button>
+                </Tooltip>
+              )}
+            </div>
           </PropertiesTable.Row>
           <PropertiesTable.Row label="vpc">
             {vpc ? (

diff --git a/app/ui/styles/components/spinner.css b/app/ui/styles/components/spinner.css
@@ -46,6 +46,10 @@
   stroke: var(--content-default);
 }
 
+.spinner-secondary .path {
+  stroke: var(--content-secondary);
+}
+
 .spinner-primary .bg {
   stroke: var(--content-accent);
 }