From d033fdc4a10b3b05813de1f4073a1b256059f12c Mon Sep 17 00:00:00 2001
From: David Crespo <david.crespo@oxidecomputer.com>
Date: Wed, 17 Apr 2024 17:17:15 -0500
Subject: [PATCH 1/4] fake refresh button

---
 app/components/RefreshButton.tsx | 22 ++++++++++++++++++++--
 1 file changed, 20 insertions(+), 2 deletions(-)

diff --git a/app/components/RefreshButton.tsx b/app/components/RefreshButton.tsx
index aa59eb5bea..a17dad7423 100644
--- a/app/components/RefreshButton.tsx
+++ b/app/components/RefreshButton.tsx
@@ -6,14 +6,32 @@
  * 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'
+import { useTimeout } from '~/ui/lib/use-timeout'
 
 export function RefreshButton({ onClick }: { onClick: () => void }) {
+  // fake timer on fetching because it's too annoying to actually track it
+  const [refreshing, setRefreshing] = useState(false)
+  useTimeout(() => setRefreshing(false), refreshing ? 500 : null)
+
   return (
-    <Button size="icon" variant="ghost" onClick={onClick} aria-label="Refresh data">
-      <Refresh16Icon />
+    <Button
+      size="icon"
+      variant="ghost"
+      onClick={() => {
+        onClick()
+        setRefreshing(true)
+      }}
+      aria-label="Refresh data"
+    >
+      <SpinnerLoader isLoading={refreshing}>
+        <Refresh16Icon />
+      </SpinnerLoader>
     </Button>
   )
 }

From 5b489e1908d9d5b461759b209a76e25cfb5c2626 Mon Sep 17 00:00:00 2001
From: David Crespo <david.crespo@oxidecomputer.com>
Date: Wed, 17 Apr 2024 17:24:07 -0500
Subject: [PATCH 2/4] actually don't fake it!

---
 app/components/RefreshButton.tsx                | 10 ++++------
 app/pages/project/instances/InstancesPage.tsx   |  2 +-
 .../project/instances/instance/InstancePage.tsx | 17 +++++++++++------
 3 files changed, 16 insertions(+), 13 deletions(-)

diff --git a/app/components/RefreshButton.tsx b/app/components/RefreshButton.tsx
index a17dad7423..009be6b462 100644
--- a/app/components/RefreshButton.tsx
+++ b/app/components/RefreshButton.tsx
@@ -12,20 +12,18 @@ import { Refresh16Icon } from '@oxide/design-system/icons/react'
 
 import { Button } from '~/ui/lib/Button'
 import { SpinnerLoader } from '~/ui/lib/Spinner'
-import { useTimeout } from '~/ui/lib/use-timeout'
 
-export function RefreshButton({ onClick }: { onClick: () => void }) {
-  // fake timer on fetching because it's too annoying to actually track it
+export function RefreshButton({ onClick }: { onClick: () => Promise<void> }) {
   const [refreshing, setRefreshing] = useState(false)
-  useTimeout(() => setRefreshing(false), refreshing ? 500 : null)
 
   return (
     <Button
       size="icon"
       variant="ghost"
-      onClick={() => {
-        onClick()
+      onClick={async () => {
         setRefreshing(true)
+        await onClick()
+        setRefreshing(false)
       }}
       aria-label="Refresh data"
     >
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..6149f3c565 100644
--- a/app/pages/project/instances/instance/InstancePage.tsx
+++ b/app/pages/project/instances/instance/InstancePage.tsx
@@ -38,12 +38,17 @@ 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
+// TODO: try awaiting this inside of the function and using that to power the thing
+async function refreshData() {
+  console.log('start')
+  await Promise.all([
+    apiQueryClient.invalidateQueries('instanceView'),
+    apiQueryClient.invalidateQueries('instanceExternalIpList'),
+    apiQueryClient.invalidateQueries('instanceNetworkInterfaceList'),
+    apiQueryClient.invalidateQueries('instanceDiskList'), // storage tab
+    apiQueryClient.invalidateQueries('diskMetricsList'), // metrics tab
+  ])
+  console.log('end')
 }
 
 InstancePage.loader = async ({ params }: LoaderFunctionArgs) => {

From db5f66595d530150d35b3ff7acbceb5e8be84864 Mon Sep 17 00:00:00 2001
From: David Crespo <david.crespo@oxidecomputer.com>
Date: Wed, 17 Apr 2024 17:29:52 -0500
Subject: [PATCH 3/4] we hate newlines in jsx!

---
 app/components/RefreshButton.tsx | 17 +++++++----------
 1 file changed, 7 insertions(+), 10 deletions(-)

diff --git a/app/components/RefreshButton.tsx b/app/components/RefreshButton.tsx
index 009be6b462..a6d4f02adb 100644
--- a/app/components/RefreshButton.tsx
+++ b/app/components/RefreshButton.tsx
@@ -16,17 +16,14 @@ 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)
+  }
+
   return (
-    <Button
-      size="icon"
-      variant="ghost"
-      onClick={async () => {
-        setRefreshing(true)
-        await onClick()
-        setRefreshing(false)
-      }}
-      aria-label="Refresh data"
-    >
+    <Button size="icon" variant="ghost" onClick={refresh} aria-label="Refresh data">
       <SpinnerLoader isLoading={refreshing}>
         <Refresh16Icon />
       </SpinnerLoader>

From ba06095fb1f86f5c50306508ba4050d4288bda3b Mon Sep 17 00:00:00 2001
From: David Crespo <david.crespo@oxidecomputer.com>
Date: Wed, 17 Apr 2024 17:34:47 -0500
Subject: [PATCH 4/4] remove console.logs and TODOs

---
 app/pages/project/instances/instance/InstancePage.tsx | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/app/pages/project/instances/instance/InstancePage.tsx b/app/pages/project/instances/instance/InstancePage.tsx
index 6149f3c565..a520fe06f9 100644
--- a/app/pages/project/instances/instance/InstancePage.tsx
+++ b/app/pages/project/instances/instance/InstancePage.tsx
@@ -38,9 +38,7 @@ function getPrimaryVpcId(nics: InstanceNetworkInterface[]) {
 }
 
 // this is meant to cover everything that we fetch in the page
-// TODO: try awaiting this inside of the function and using that to power the thing
 async function refreshData() {
-  console.log('start')
   await Promise.all([
     apiQueryClient.invalidateQueries('instanceView'),
     apiQueryClient.invalidateQueries('instanceExternalIpList'),
@@ -48,7 +46,6 @@ async function refreshData() {
     apiQueryClient.invalidateQueries('instanceDiskList'), // storage tab
     apiQueryClient.invalidateQueries('diskMetricsList'), // metrics tab
   ])
-  console.log('end')
 }
 
 InstancePage.loader = async ({ params }: LoaderFunctionArgs) => {