From 3d589736f4e362300d4740ecbe85b14e39623211 Mon Sep 17 00:00:00 2001
From: Charlie Park <charlie@oxidecomputer.com>
Date: Wed, 17 Apr 2024 16:21:54 -0700
Subject: [PATCH] add confirmation indicator when refresh finishes

---
 app/components/RefreshButton.tsx | 34 +++++++++++++++++++++++++++-----
 1 file changed, 29 insertions(+), 5 deletions(-)

diff --git a/app/components/RefreshButton.tsx b/app/components/RefreshButton.tsx
index a6d4f02adb..61a129a283 100644
--- a/app/components/RefreshButton.tsx
+++ b/app/components/RefreshButton.tsx
@@ -5,28 +5,52 @@
  *
  * Copyright Oxide Computer Company
  */
-
+import { animated, config, useTransition } from '@react-spring/web'
 import { useState } from 'react'
 
-import { Refresh16Icon } from '@oxide/design-system/icons/react'
+import { Refresh16Icon, Success12Icon } 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: () => Promise<void> }) {
   const [refreshing, setRefreshing] = useState(false)
+  const [hasReloaded, setHasReloaded] = useState(false)
+  useTimeout(() => setHasReloaded(false), hasReloaded ? 1000 : null)
+
+  const transitions = useTransition(hasReloaded, {
+    from: { opacity: 0, transform: 'scale(0.8)' },
+    enter: { opacity: 1, transform: 'scale(1)' },
+    leave: { opacity: 0, transform: 'scale(0.8)' },
+    config: config.stiff,
+    trail: 100,
+    initial: null,
+  })
 
   async function refresh() {
     setRefreshing(true)
     await onClick()
     setRefreshing(false)
+    setHasReloaded(true)
   }
 
   return (
     <Button size="icon" variant="ghost" onClick={refresh} aria-label="Refresh data">
-      <SpinnerLoader isLoading={refreshing}>
-        <Refresh16Icon />
-      </SpinnerLoader>
+      {transitions((styles, item) => (
+        <animated.div
+          style={styles}
+          className="absolute inset-0 flex items-center justify-center"
+        >
+          {item ? (
+            <Success12Icon className="text-accent bg-accent-secondary" />
+          ) : (
+            <SpinnerLoader isLoading={refreshing}>
+              <Refresh16Icon />
+            </SpinnerLoader>
+          )}
+        </animated.div>
+      ))}
     </Button>
   )
 }