From 3ade85161983d35e852a75fb63f5a9ed21f9f3a3 Mon Sep 17 00:00:00 2001
From: David Crespo <david.crespo@oxidecomputer.com>
Date: Fri, 21 Aug 2026 12:58:47 -0500
Subject: [PATCH 1/2] fix submit button loading state race

---
 app/ui/lib/Button.tsx               | 25 +++++++++----------------
 app/ui/styles/components/button.css | 19 +++++++++++++++++++
 2 files changed, 28 insertions(+), 16 deletions(-)

diff --git a/app/ui/lib/Button.tsx b/app/ui/lib/Button.tsx
index a0ec80ef7..ccf0c8afd 100644
--- a/app/ui/lib/Button.tsx
+++ b/app/ui/lib/Button.tsx
@@ -6,7 +6,6 @@
  * Copyright Oxide Computer Company
  */
 import cn from 'classnames'
-import * as m from 'motion/react-m'
 import { type MouseEventHandler, type ReactNode } from 'react'
 
 import { type BadgeColor } from '@oxide/design-system/ui'
@@ -120,25 +119,19 @@ export const Button = ({
         {...rest}
       >
         {loading && (
-          <m.span
-            animate={{ opacity: 1, y: '-50%', x: '-50%' }}
-            initial={{ opacity: 0, y: 'calc(-50% - 25px)', x: '-50%' }}
-            transition={{ type: 'spring', duration: 0.3, bounce: 0 }}
-            className="absolute top-1/2 left-1/2 flex items-center justify-center"
-          >
+          <span className="button-spinner-in absolute top-1/2 left-1/2 flex -translate-x-1/2 -translate-y-1/2 items-center justify-center">
             <Spinner variant={variantToBadgeColorMap[variant || 'primary']} />
-          </m.span>
+          </span>
         )}
-        <m.span
-          className={cn('flex items-center', innerClassName)}
-          animate={{
-            opacity: loading ? 0 : 1,
-            y: loading ? 25 : 0,
-          }}
-          transition={{ type: 'spring', duration: 0.3, bounce: 0 }}
+        <span
+          className={cn(
+            'flex items-center transition-[opacity,translate] duration-300 ease-(--button-loading-easing) motion-reduce:transition-none',
+            loading ? 'translate-y-[25px] opacity-0' : 'translate-y-0 opacity-100',
+            innerClassName
+          )}
         >
           {children}
-        </m.span>
+        </span>
       </button>
     </Wrap>
   )
diff --git a/app/ui/styles/components/button.css b/app/ui/styles/components/button.css
index 4e0ba40b6..fc8388e1a 100644
--- a/app/ui/styles/components/button.css
+++ b/app/ui/styles/components/button.css
@@ -8,6 +8,8 @@
 
 .ox-button {
   @apply relative;
+  /* Approximates Motion's { type: 'spring', duration: 0.3, bounce: 0 }. */
+  --button-loading-easing: cubic-bezier(0.35, 0.98, 0.35, 1);
 
   &:after {
     content: '';
@@ -72,3 +74,20 @@
 .active-clicked:active:not(.visually-disabled) {
   @apply motion-safe:translate-y-px;
 }
+
+@keyframes button-spinner-in {
+  from {
+    opacity: 0;
+    transform: translateY(-25px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .button-spinner-in {
+    animation: button-spinner-in 0.3s var(--button-loading-easing);
+  }
+}

From 277710bce65d2769737a8dc1313f9698a6d93988 Mon Sep 17 00:00:00 2001
From: David Crespo <david.crespo@oxidecomputer.com>
Date: Fri, 21 Aug 2026 15:26:00 -0500
Subject: [PATCH 2/2] a bit of cleanup: add comments, move transition setup to
 CSS

---
 app/ui/lib/Button.tsx               |  2 +-
 app/ui/styles/components/button.css | 18 ++++++++++++++++--
 2 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/app/ui/lib/Button.tsx b/app/ui/lib/Button.tsx
index ccf0c8afd..d7b3262d0 100644
--- a/app/ui/lib/Button.tsx
+++ b/app/ui/lib/Button.tsx
@@ -125,7 +125,7 @@ export const Button = ({
         )}
         <span
           className={cn(
-            'flex items-center transition-[opacity,translate] duration-300 ease-(--button-loading-easing) motion-reduce:transition-none',
+            'button-content flex items-center',
             loading ? 'translate-y-[25px] opacity-0' : 'translate-y-0 opacity-100',
             innerClassName
           )}
diff --git a/app/ui/styles/components/button.css b/app/ui/styles/components/button.css
index fc8388e1a..e9570f8b4 100644
--- a/app/ui/styles/components/button.css
+++ b/app/ui/styles/components/button.css
@@ -8,7 +8,10 @@
 
 .ox-button {
   @apply relative;
-  /* Approximates Motion's { type: 'spring', duration: 0.3, bounce: 0 }. */
+  /*
+   * Shared by the spinner keyframes and the .button-content transition below.
+   * Approximates Motion's { type: 'spring', duration: 0.3, bounce: 0 }.
+   */
   --button-loading-easing: cubic-bezier(0.35, 0.98, 0.35, 1);
 
   &:after {
@@ -75,6 +78,9 @@
   @apply motion-safe:translate-y-px;
 }
 
+/* Animating transform is deliberate: the spinner's centering utilities set the
+ * separate translate property, which composes with transform instead of being
+ * overridden by it. */
 @keyframes button-spinner-in {
   from {
     opacity: 0;
@@ -87,7 +93,15 @@
 }
 
 @media (prefers-reduced-motion: no-preference) {
-  .button-spinner-in {
+  .ox-button .button-spinner-in {
     animation: button-spinner-in 0.3s var(--button-loading-easing);
   }
+
+  /* Button label; swaps out as the spinner drops in. Loading state is toggled
+   * with utility classes in Button.tsx. */
+  .ox-button .button-content {
+    transition:
+      opacity 0.3s var(--button-loading-easing),
+      translate 0.3s var(--button-loading-easing);
+  }
 }