Fix submit button loading state race (#3344)

Closes #3340 by switching from Motion to a CSS animation. The problem
was that state internal to Motion was getting messed up when it got
spammed with input. I had Codex figure out a Bezier easing that matches
Motion's spring animation.


https://github.com/user-attachments/assets/8c2356d8-728b-4dd0-b276-5ca6e9726243

Author: david-crespo

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(
+            'button-content flex items-center',
+            loading ? 'translate-y-[25px] opacity-0' : 'translate-y-0 opacity-100',
+            innerClassName
+          )}
         >
           {children}
-        </m.span>
+        </span>
       </button>
     </Wrap>
   )

app/ui/styles/components/button.css

@@ -8,6 +8,11 @@
 
 .ox-button {
   @apply relative;
+  /*
+   * 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 {
     content: '';
@@ -72,3 +77,31 @@
 .active-clicked:active:not(.visually-disabled) {
   @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;
+    transform: translateY(-25px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .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);
+  }
+}