diff --git a/app/components/RefreshButton.tsx b/app/components/RefreshButton.tsx
index aa59eb5bea..a6d4f02adb 100644
--- a/app/components/RefreshButton.tsx
+++ b/app/components/RefreshButton.tsx
@@ -6,14 +6,27 @@
  * Copyright Oxide Computer Company
  */
 
+import { useState } from 'react'
+
 import { Refresh16Icon } from '@oxide/design-system/icons/react'
 
 import { Button } from '~/ui/lib/Button'
+import { SpinnerLoader } from '~/ui/lib/Spinner'
+
+export function RefreshButton({ onClick }: { onClick: () => Promise<void> }) {
+  const [refreshing, setRefreshing] = useState(false)
+
+  async function refresh() {
+    setRefreshing(true)
+    await onClick()
+    setRefreshing(false)
+  }
 
-export function RefreshButton({ onClick }: { onClick: () => void }) {
   return (
-    <Button size="icon" variant="ghost" onClick={onClick} aria-label="Refresh data">
-      <Refresh16Icon />
+    <Button size="icon" variant="ghost" onClick={refresh} aria-label="Refresh data">
+      <SpinnerLoader isLoading={refreshing}>
+        <Refresh16Icon />
+      </SpinnerLoader>
     </Button>
   )
 }
diff --git a/app/pages/project/instances/InstancesPage.tsx b/app/pages/project/instances/InstancesPage.tsx
index a3f1632ef9..1974a461cd 100644
--- a/app/pages/project/instances/InstancesPage.tsx
+++ b/app/pages/project/instances/InstancesPage.tsx
@@ -123,7 +123,7 @@ export function InstancesPage() {
         <PageTitle icon={<Instances24Icon />}>Instances</PageTitle>
       </PageHeader>
       <TableActions>
-        <RefreshButton onClick={() => apiQueryClient.invalidateQueries('instanceList')} />
+        <RefreshButton onClick={refetchInstances} />
         <Link to={pb.instancesNew({ project })} className={buttonStyle({ size: 'sm' })}>
           New Instance
         </Link>
diff --git a/app/pages/project/instances/instance/InstancePage.tsx b/app/pages/project/instances/instance/InstancePage.tsx
index 67dbf3955e..a520fe06f9 100644
--- a/app/pages/project/instances/instance/InstancePage.tsx
+++ b/app/pages/project/instances/instance/InstancePage.tsx
@@ -38,12 +38,14 @@ function getPrimaryVpcId(nics: InstanceNetworkInterface[]) {
 }
 
 // this is meant to cover everything that we fetch in the page
-function refreshData() {
-  apiQueryClient.invalidateQueries('instanceView')
-  apiQueryClient.invalidateQueries('instanceExternalIpList')
-  apiQueryClient.invalidateQueries('instanceNetworkInterfaceList')
-  apiQueryClient.invalidateQueries('instanceDiskList') // storage tab
-  apiQueryClient.invalidateQueries('diskMetricsList') // metrics tab
+async function refreshData() {
+  await Promise.all([
+    apiQueryClient.invalidateQueries('instanceView'),
+    apiQueryClient.invalidateQueries('instanceExternalIpList'),
+    apiQueryClient.invalidateQueries('instanceNetworkInterfaceList'),
+    apiQueryClient.invalidateQueries('instanceDiskList'), // storage tab
+    apiQueryClient.invalidateQueries('diskMetricsList'), // metrics tab
+  ])
 }
 
 InstancePage.loader = async ({ params }: LoaderFunctionArgs) => {