From 0a6cb27fa26ec52b4842ff6ccd4ba01c25156b48 Mon Sep 17 00:00:00 2001
From: Jorge Moya <jorge.moya@bigcommerce.com>
Date: Wed, 15 May 2024 12:11:36 -0500
Subject: [PATCH 1/4] feat(core): add Button with loading state

---
 .changeset/neat-grapes-allow.md               |  5 ++++
 .../_components/change-password-form.tsx      | 18 +++--------
 .../cart/_components/checkout-button.tsx      | 14 ++-------
 .../cart/_components/coupon-code/index.tsx    | 20 ++++++-------
 .../_components/remove-from-cart-button.tsx   | 23 ++++++--------
 .../cart/_components/shipping-info/index.tsx  | 20 ++++++-------
 .../shipping-options/submit-button.tsx        | 19 +++++-------
 .../compare/_components/add-to-cart.tsx       | 20 ++++++-------
 .../_components/change-password-form.tsx      | 18 +++--------
 .../login/_components/login-form.tsx          | 19 +++++-------
 .../_components/reset-password-form/index.tsx | 18 +++--------
 .../register-customer-form/index.tsx          | 18 +++--------
 .../contact/[id]/contact-us/index.tsx         | 18 +++--------
 core/components/button/index.tsx              | 30 +++++++++++++++++++
 core/components/product-card/add-to-cart.tsx  | 20 ++++++-------
 core/components/product-form/add-to-cart.tsx  | 19 ++++--------
 core/components/search-form/index.tsx         | 15 +++-------
 core/messages/en.json                         |  1 -
 18 files changed, 128 insertions(+), 187 deletions(-)
 create mode 100644 .changeset/neat-grapes-allow.md
 create mode 100644 core/components/button/index.tsx

diff --git a/.changeset/neat-grapes-allow.md b/.changeset/neat-grapes-allow.md
new file mode 100644
index 0000000000..c5cf1c63d5
--- /dev/null
+++ b/.changeset/neat-grapes-allow.md
@@ -0,0 +1,5 @@
+---
+"@bigcommerce/catalyst-core": patch
+---
+
+Add Button with loading state.
diff --git a/core/app/[locale]/(default)/account/[tab]/_components/change-password-form.tsx b/core/app/[locale]/(default)/account/[tab]/_components/change-password-form.tsx
index 5d7524f075..5b682982de 100644
--- a/core/app/[locale]/(default)/account/[tab]/_components/change-password-form.tsx
+++ b/core/app/[locale]/(default)/account/[tab]/_components/change-password-form.tsx
@@ -1,15 +1,14 @@
 'use client';
 
-import { Loader2 as Spinner } from 'lucide-react';
 import { useTranslations } from 'next-intl';
 import { ChangeEvent, useEffect, useRef, useState } from 'react';
 import { useFormState, useFormStatus } from 'react-dom';
 import { z } from 'zod';
 
 import { CustomerChangePasswordSchema } from '~/client/mutations/submit-change-password';
+import { Button } from '~/components/button';
 import { logout } from '~/components/header/_actions/logout';
 import { Link } from '~/components/link';
-import { Button } from '~/components/ui/button';
 import {
   Field,
   FieldControl,
@@ -74,20 +73,11 @@ const SubmitButton = () => {
     <Button
       className="relative w-full items-center px-8 py-2 md:w-fit"
       data-button
-      disabled={pending}
+      loading={pending}
+      loadingText={t('spinnerText')}
       variant="primary"
     >
-      <>
-        {pending && (
-          <>
-            <span className="absolute z-10 flex h-full w-full items-center justify-center bg-gray-400">
-              <Spinner aria-hidden="true" className="animate-spin" />
-            </span>
-            <span className="sr-only">{t('spinnerText')}</span>
-          </>
-        )}
-        <span aria-hidden={pending}>{t('submitText')}</span>
-      </>
+      {t('submitText')}
     </Button>
   );
 };
diff --git a/core/app/[locale]/(default)/cart/_components/checkout-button.tsx b/core/app/[locale]/(default)/cart/_components/checkout-button.tsx
index a702081d12..f62985dc83 100644
--- a/core/app/[locale]/(default)/cart/_components/checkout-button.tsx
+++ b/core/app/[locale]/(default)/cart/_components/checkout-button.tsx
@@ -1,10 +1,9 @@
 'use client';
 
-import { Loader2 as Spinner } from 'lucide-react';
 import { useTranslations } from 'next-intl';
 import { useFormStatus } from 'react-dom';
 
-import { Button } from '~/components/ui/button';
+import { Button } from '~/components/button';
 
 import { redirectToCheckout } from '../_actions/redirect-to-checkout';
 
@@ -13,15 +12,8 @@ const InternalButton = () => {
   const { pending } = useFormStatus();
 
   return (
-    <Button className="mt-6" disabled={pending}>
-      {pending ? (
-        <>
-          <Spinner aria-hidden="true" className="animate-spin text-primary " />
-          <span className="sr-only">{t('loading')}</span>
-        </>
-      ) : (
-        t('proceedToCheckout')
-      )}
+    <Button className="mt-6" loading={pending} loadingText={t('loading')}>
+      {t('proceedToCheckout')}
     </Button>
   );
 };
diff --git a/core/app/[locale]/(default)/cart/_components/coupon-code/index.tsx b/core/app/[locale]/(default)/cart/_components/coupon-code/index.tsx
index 1cde87dca4..bce428dadb 100644
--- a/core/app/[locale]/(default)/cart/_components/coupon-code/index.tsx
+++ b/core/app/[locale]/(default)/cart/_components/coupon-code/index.tsx
@@ -1,13 +1,13 @@
 'use client';
 
-import { AlertCircle, Loader2 as Spinner } from 'lucide-react';
+import { AlertCircle } from 'lucide-react';
 import { useFormatter, useTranslations } from 'next-intl';
 import { useEffect, useState } from 'react';
 import { useFormStatus } from 'react-dom';
 import { toast } from 'react-hot-toast';
 
 import { FragmentOf } from '~/client/graphql';
-import { Button } from '~/components/ui/button';
+import { Button } from '~/components/button';
 import { Field, FieldControl, FieldMessage, Form, FormSubmit } from '~/components/ui/form';
 import { Input } from '~/components/ui/input';
 
@@ -20,15 +20,13 @@ const SubmitButton = () => {
   const { pending } = useFormStatus();
 
   return (
-    <Button className="items-center px-8 py-2" disabled={pending} variant="secondary">
-      {pending ? (
-        <>
-          <Spinner aria-hidden="true" className="animate-spin" />
-          <span className="sr-only">{t('spinnerText')}</span>
-        </>
-      ) : (
-        <span>{t('submitText')}</span>
-      )}
+    <Button
+      className="items-center px-8 py-2"
+      loading={pending}
+      loadingText={t('spinnerText')}
+      variant="secondary"
+    >
+      {t('submitText')}
     </Button>
   );
 };
diff --git a/core/app/[locale]/(default)/cart/_components/remove-from-cart-button.tsx b/core/app/[locale]/(default)/cart/_components/remove-from-cart-button.tsx
index 29dee50c90..b425f390f2 100644
--- a/core/app/[locale]/(default)/cart/_components/remove-from-cart-button.tsx
+++ b/core/app/[locale]/(default)/cart/_components/remove-from-cart-button.tsx
@@ -1,28 +1,23 @@
 'use client';
 
-import { Loader2 as Spinner } from 'lucide-react';
 import { useTranslations } from 'next-intl';
 import { useFormStatus } from 'react-dom';
 
+import { Button } from '~/components/button';
+
 export const RemoveFromCartButton = () => {
   const { pending } = useFormStatus();
   const t = useTranslations('Cart.SubmitRemoveItem');
 
   return (
-    <button
-      aria-label={t('submitText')}
-      className="items-center text-primary hover:text-secondary focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-primary/20"
-      disabled={pending}
+    <Button
+      className="w-auto items-center p-0 text-primary hover:bg-transparent disabled:text-primary"
+      loading={pending}
+      loadingText={t('spinnerText')}
       type="submit"
+      variant="subtle"
     >
-      {pending ? (
-        <>
-          <Spinner aria-hidden="true" className="animate-spin text-primary " />
-          <span className="sr-only">{t('spinnerText')}</span>
-        </>
-      ) : (
-        <>{t('remove')}</>
-      )}
-    </button>
+      {t('remove')}
+    </Button>
   );
 };
diff --git a/core/app/[locale]/(default)/cart/_components/shipping-info/index.tsx b/core/app/[locale]/(default)/cart/_components/shipping-info/index.tsx
index 9fb1e31c2a..5b9fb54e58 100644
--- a/core/app/[locale]/(default)/cart/_components/shipping-info/index.tsx
+++ b/core/app/[locale]/(default)/cart/_components/shipping-info/index.tsx
@@ -1,4 +1,4 @@
-import { AlertCircle, Loader2 as Spinner } from 'lucide-react';
+import { AlertCircle } from 'lucide-react';
 import { useTranslations } from 'next-intl';
 import { useEffect, useReducer } from 'react';
 import { useFormStatus } from 'react-dom';
@@ -7,7 +7,7 @@ import { toast } from 'react-hot-toast';
 import { getShippingCountries } from '~/app/[locale]/(default)/cart/_components/shipping-estimator/get-shipping-countries';
 import { FragmentOf } from '~/client/graphql';
 import { ExistingResultType } from '~/client/util';
-import { Button } from '~/components/ui/button';
+import { Button } from '~/components/button';
 import { Field, FieldControl, FieldLabel, Form, FormSubmit } from '~/components/ui/form';
 import { Input } from '~/components/ui/input';
 import { Select, SelectContent, SelectItem } from '~/components/ui/select';
@@ -37,15 +37,13 @@ const SubmitButton = () => {
   const t = useTranslations('Cart.SubmitShippingInfo');
 
   return (
-    <Button className="w-full items-center px-8 py-2" disabled={pending} variant="secondary">
-      {pending ? (
-        <>
-          <Spinner aria-hidden="true" className="animate-spin" />
-          <span className="sr-only">{t('spinnerText')}</span>
-        </>
-      ) : (
-        <span>{t('submitText')}</span>
-      )}
+    <Button
+      className="w-full items-center px-8 py-2"
+      loading={pending}
+      loadingText={t('spinnerText')}
+      variant="secondary"
+    >
+      {t('submitText')}
     </Button>
   );
 };
diff --git a/core/app/[locale]/(default)/cart/_components/shipping-options/submit-button.tsx b/core/app/[locale]/(default)/cart/_components/shipping-options/submit-button.tsx
index 09ebbefa3a..6035888e6e 100644
--- a/core/app/[locale]/(default)/cart/_components/shipping-options/submit-button.tsx
+++ b/core/app/[locale]/(default)/cart/_components/shipping-options/submit-button.tsx
@@ -1,23 +1,20 @@
-import { Loader2 as Spinner } from 'lucide-react';
 import { useTranslations } from 'next-intl';
 import { useFormStatus } from 'react-dom';
 
-import { Button } from '~/components/ui/button';
+import { Button } from '~/components/button';
 
 export const SubmitButton = () => {
   const t = useTranslations('Cart.SubmitShippingCost');
   const { pending } = useFormStatus();
 
   return (
-    <Button className="w-full items-center px-8 py-2" disabled={pending} variant="secondary">
-      {pending ? (
-        <>
-          <Spinner aria-hidden="true" className="animate-spin" />
-          <span className="sr-only">{t('spinnerText')}</span>
-        </>
-      ) : (
-        <span>{t('submitText')}</span>
-      )}
+    <Button
+      className="w-full items-center px-8 py-2"
+      loading={pending}
+      loadingText={t('spinnerText')}
+      variant="secondary"
+    >
+      {t('submitText')}
     </Button>
   );
 };
diff --git a/core/app/[locale]/(default)/compare/_components/add-to-cart.tsx b/core/app/[locale]/(default)/compare/_components/add-to-cart.tsx
index 5c09e42a5e..08e2e62cfc 100644
--- a/core/app/[locale]/(default)/compare/_components/add-to-cart.tsx
+++ b/core/app/[locale]/(default)/compare/_components/add-to-cart.tsx
@@ -1,10 +1,9 @@
 'use client';
 
-import { Loader2 as Spinner } from 'lucide-react';
 import { useTranslations } from 'next-intl';
 import { useFormStatus } from 'react-dom';
 
-import { Button } from '~/components/ui/button';
+import { Button } from '~/components/button';
 
 export const AddToCart = ({
   disabled = false,
@@ -17,15 +16,14 @@ export const AddToCart = ({
   const { pending } = useFormStatus();
 
   return (
-    <Button aria-label={productName} disabled={disabled || pending} type="submit">
-      {pending ? (
-        <>
-          <Spinner aria-hidden="true" className="animate-spin" />
-          <span className="sr-only">{t('processing')}</span>
-        </>
-      ) : (
-        t('addToCart')
-      )}
+    <Button
+      aria-label={productName}
+      disabled={disabled}
+      loading={pending}
+      loadingText={t('processing')}
+      type="submit"
+    >
+      {t('addToCart')}
     </Button>
   );
 };
diff --git a/core/app/[locale]/(default)/login/_components/change-password-form.tsx b/core/app/[locale]/(default)/login/_components/change-password-form.tsx
index c005810517..6a405bf282 100644
--- a/core/app/[locale]/(default)/login/_components/change-password-form.tsx
+++ b/core/app/[locale]/(default)/login/_components/change-password-form.tsx
@@ -1,11 +1,10 @@
 'use client';
 
-import { Loader2 as Spinner } from 'lucide-react';
 import { useTranslations } from 'next-intl';
 import { ChangeEvent, useRef, useState } from 'react';
 import { useFormState, useFormStatus } from 'react-dom';
 
-import { Button } from '~/components/ui/button';
+import { Button } from '~/components/button';
 import {
   Field,
   FieldControl,
@@ -33,20 +32,11 @@ const SubmitButton = () => {
     <Button
       className="relative w-fit items-center px-8 py-2"
       data-button
-      disabled={pending}
+      loading={pending}
+      loadingText={t('spinnerText')}
       variant="primary"
     >
-      <>
-        {pending && (
-          <>
-            <span className="absolute z-10 flex h-full w-full items-center justify-center bg-gray-400">
-              <Spinner aria-hidden="true" className="animate-spin" />
-            </span>
-            <span className="sr-only">{t('spinnerText')}</span>
-          </>
-        )}
-        <span aria-hidden={pending}>{t('submitText')}</span>
-      </>
+      {t('submitText')}
     </Button>
   );
 };
diff --git a/core/app/[locale]/(default)/login/_components/login-form.tsx b/core/app/[locale]/(default)/login/_components/login-form.tsx
index d2469b9ea9..3428cacd16 100644
--- a/core/app/[locale]/(default)/login/_components/login-form.tsx
+++ b/core/app/[locale]/(default)/login/_components/login-form.tsx
@@ -1,12 +1,11 @@
 'use client';
 
-import { Loader2 as Spinner } from 'lucide-react';
 import { useTranslations } from 'next-intl';
 import { ChangeEvent, useState } from 'react';
 import { useFormState, useFormStatus } from 'react-dom';
 
+import { Button } from '~/components/button';
 import { Link } from '~/components/link';
-import { Button } from '~/components/ui/button';
 import {
   Field,
   FieldControl,
@@ -101,15 +100,13 @@ export const LoginForm = () => {
         </Field>
         <div className="flex flex-col items-start md:flex-row md:items-center md:justify-start md:gap-10">
           <FormSubmit asChild>
-            <Button className="w-auto" disabled={pending} variant="primary">
-              {pending ? (
-                <>
-                  <Spinner aria-hidden="true" className="animate-spin" />
-                  <span className="sr-only"> {t('Form.submitting')}</span>
-                </>
-              ) : (
-                <span>{t('Form.logIn')}</span>
-              )}
+            <Button
+              className="w-auto"
+              loading={pending}
+              loadingText={t('Form.submitting')}
+              variant="primary"
+            >
+              {t('Form.logIn')}
             </Button>
           </FormSubmit>
           <Link
diff --git a/core/app/[locale]/(default)/login/_components/reset-password-form/index.tsx b/core/app/[locale]/(default)/login/_components/reset-password-form/index.tsx
index e4bebfe422..164b2268d3 100644
--- a/core/app/[locale]/(default)/login/_components/reset-password-form/index.tsx
+++ b/core/app/[locale]/(default)/login/_components/reset-password-form/index.tsx
@@ -1,13 +1,12 @@
 'use client';
 
-import { Loader2 as Spinner } from 'lucide-react';
 import { useTranslations } from 'next-intl';
 import { ChangeEvent, useRef, useState } from 'react';
 import { useFormStatus } from 'react-dom';
 import ReCaptcha from 'react-google-recaptcha';
 
 import { type FragmentOf } from '~/client/graphql';
-import { Button } from '~/components/ui/button';
+import { Button } from '~/components/button';
 import {
   Field,
   FieldControl,
@@ -40,20 +39,11 @@ const SubmitButton = () => {
     <Button
       className="relative w-fit items-center px-8 py-2"
       data-button
-      disabled={pending}
+      loading={pending}
+      loadingText={t('spinnerText')}
       variant="primary"
     >
-      <>
-        {pending && (
-          <>
-            <span className="absolute z-10 flex h-full w-full items-center justify-center bg-gray-400">
-              <Spinner aria-hidden="true" className="animate-spin" />
-            </span>
-            <span className="sr-only">{t('spinnerText')}</span>
-          </>
-        )}
-        <span aria-hidden={pending}>{t('submitText')}</span>
-      </>
+      {t('submitText')}
     </Button>
   );
 };
diff --git a/core/app/[locale]/(default)/login/register-customer/_components/register-customer-form/index.tsx b/core/app/[locale]/(default)/login/register-customer/_components/register-customer-form/index.tsx
index a8e8c140a8..c0c2d498f7 100644
--- a/core/app/[locale]/(default)/login/register-customer/_components/register-customer-form/index.tsx
+++ b/core/app/[locale]/(default)/login/register-customer/_components/register-customer-form/index.tsx
@@ -1,13 +1,12 @@
 'use client';
 
-import { Loader2 as Spinner } from 'lucide-react';
 import { useTranslations } from 'next-intl';
 import { ChangeEvent, useRef, useState } from 'react';
 import { useFormStatus } from 'react-dom';
 import ReCaptcha from 'react-google-recaptcha';
 
 import { getRegisterCustomerQuery } from '~/app/[locale]/(default)/login/register-customer/page-data';
-import { Button } from '~/components/ui/button';
+import { Button } from '~/components/button';
 import { Field, Form, FormSubmit } from '~/components/ui/form';
 import { Message } from '~/components/ui/message';
 
@@ -101,20 +100,11 @@ const SubmitButton = ({ messages }: SumbitMessages) => {
   return (
     <Button
       className="relative mt-8 w-fit items-center px-8 py-2"
-      disabled={pending}
+      loading={pending}
+      loadingText={messages.submitting}
       variant="primary"
     >
-      <>
-        {pending && (
-          <>
-            <span className="absolute z-10 flex h-full w-full items-center justify-center bg-gray-400">
-              <Spinner aria-hidden="true" className="animate-spin" />
-            </span>
-            <span className="sr-only">{messages.submitting}</span>
-          </>
-        )}
-        <span aria-hidden={pending}>{messages.submit}</span>
-      </>
+      {messages.submit}
     </Button>
   );
 };
diff --git a/core/app/[locale]/(default)/webpages/contact/[id]/contact-us/index.tsx b/core/app/[locale]/(default)/webpages/contact/[id]/contact-us/index.tsx
index 0fbcf492b8..2e27a73eb3 100644
--- a/core/app/[locale]/(default)/webpages/contact/[id]/contact-us/index.tsx
+++ b/core/app/[locale]/(default)/webpages/contact/[id]/contact-us/index.tsx
@@ -1,13 +1,12 @@
 'use client';
 
 import { type FragmentOf } from 'gql.tada';
-import { Loader2 as Spinner } from 'lucide-react';
 import { useTranslations } from 'next-intl';
 import { ChangeEvent, useRef, useState } from 'react';
 import { useFormStatus } from 'react-dom';
 import ReCaptcha from 'react-google-recaptcha';
 
-import { Button } from '~/components/ui/button';
+import { Button } from '~/components/button';
 import {
   Field,
   FieldControl,
@@ -46,20 +45,11 @@ const Submit = () => {
     <FormSubmit asChild>
       <Button
         className="relative mt-8 w-fit items-center px-8 py-2"
-        disabled={pending}
+        loading={pending}
+        loadingText={t('onSubmitText')}
         variant="primary"
       >
-        <>
-          {pending && (
-            <>
-              <span className="absolute z-10 flex h-full w-full items-center justify-center bg-gray-400">
-                <Spinner aria-hidden="true" className="animate-spin" />
-              </span>
-              <span className="sr-only">{t('onSubmitText')}</span>
-            </>
-          )}
-          <span aria-hidden={pending}>{t('submitFormText')}</span>
-        </>
+        {t('submitFormText')}
       </Button>
     </FormSubmit>
   );
diff --git a/core/components/button/index.tsx b/core/components/button/index.tsx
new file mode 100644
index 0000000000..69b5fc248a
--- /dev/null
+++ b/core/components/button/index.tsx
@@ -0,0 +1,30 @@
+import { Loader2 as Spinner } from 'lucide-react';
+import React from 'react';
+
+import { ButtonProps, Button as UIButton } from '~/components/ui/button';
+import { cn } from '~/lib/utils';
+
+interface Props extends ButtonProps {
+  loadingText?: string;
+  loading?: boolean;
+}
+
+export const Button = ({
+  children,
+  className,
+  disabled,
+  loading = false,
+  loadingText,
+  ...props
+}: Props) => (
+  <UIButton className={cn(className)} disabled={disabled || loading} {...props}>
+    {loading ? (
+      <>
+        <Spinner aria-hidden="true" className="animate-spin" />
+        <span className="sr-only">{loadingText}</span>
+      </>
+    ) : (
+      children
+    )}
+  </UIButton>
+);
diff --git a/core/components/product-card/add-to-cart.tsx b/core/components/product-card/add-to-cart.tsx
index e6d0ade96d..c04ceec842 100644
--- a/core/components/product-card/add-to-cart.tsx
+++ b/core/components/product-card/add-to-cart.tsx
@@ -1,25 +1,23 @@
 'use client';
 
-import { Loader2 as Spinner } from 'lucide-react';
 import { useTranslations } from 'next-intl';
 import { useFormStatus } from 'react-dom';
 
-import { Button } from '~/components/ui/button';
+import { Button } from '../button';
 
 export const AddToCart = ({ disabled = false }: { disabled?: boolean }) => {
   const { pending } = useFormStatus();
   const t = useTranslations('Product.ProductSheet');
 
   return (
-    <Button className="mt-2" disabled={disabled || pending} type="submit">
-      {pending ? (
-        <>
-          <Spinner aria-hidden="true" className="animate-spin" />
-          <span className="sr-only">{t('processing')}</span>
-        </>
-      ) : (
-        t('addToCart')
-      )}
+    <Button
+      className="mt-2"
+      disabled={disabled}
+      loading={pending}
+      loadingText={t('processing')}
+      type="submit"
+    >
+      {t('addToCart')}
     </Button>
   );
 };
diff --git a/core/components/product-form/add-to-cart.tsx b/core/components/product-form/add-to-cart.tsx
index 366e825094..41310dbc66 100644
--- a/core/components/product-form/add-to-cart.tsx
+++ b/core/components/product-form/add-to-cart.tsx
@@ -1,10 +1,10 @@
 'use client';
 
-import { ShoppingCart, Loader2 as Spinner } from 'lucide-react';
+import { ShoppingCart } from 'lucide-react';
 import { useTranslations } from 'next-intl';
 import { useFormContext } from 'react-hook-form';
 
-import { Button } from '~/components/ui/button';
+import { Button } from '../button';
 
 export const AddToCart = ({ disabled = false }: { disabled?: boolean }) => {
   const { formState } = useFormContext();
@@ -13,18 +13,9 @@ export const AddToCart = ({ disabled = false }: { disabled?: boolean }) => {
   const t = useTranslations('Product.Form');
 
   return (
-    <Button disabled={disabled || isSubmitting} type="submit">
-      {isSubmitting ? (
-        <>
-          <Spinner aria-hidden="true" className="animate-spin" />
-          <span className="sr-only">{t('processing')}</span>
-        </>
-      ) : (
-        <>
-          <ShoppingCart aria-hidden="true" className="mx-2" />
-          <span>{t('addToCart')}</span>
-        </>
-      )}
+    <Button disabled={disabled} loading={isSubmitting} loadingText={t('processing')} type="submit">
+      <ShoppingCart aria-hidden="true" className="mx-2" />
+      <span>{t('addToCart')}</span>
     </Button>
   );
 };
diff --git a/core/components/search-form/index.tsx b/core/components/search-form/index.tsx
index 1ae65bc688..9a43babde0 100644
--- a/core/components/search-form/index.tsx
+++ b/core/components/search-form/index.tsx
@@ -1,13 +1,13 @@
 'use client';
 
-import { Loader2 as Spinner } from 'lucide-react';
 import { useTranslations } from 'next-intl';
 import { useFormStatus } from 'react-dom';
 
-import { Button } from '~/components/ui/button';
 import { Field, FieldControl, Form, FormSubmit } from '~/components/ui/form';
 import { Input } from '~/components/ui/input';
 
+import { Button } from '../button';
+
 interface Props {
   initialTerm?: string;
 }
@@ -31,15 +31,8 @@ export const SearchForm = ({ initialTerm = '' }: Props) => {
           </FieldControl>
         </Field>
         <FormSubmit asChild>
-          <Button className="w-auto" disabled={pending} type="submit">
-            {pending ? (
-              <>
-                <Spinner aria-hidden="true" className="animate-spin" />
-                <span className="sr-only">{t('searching')}</span>
-              </>
-            ) : (
-              <span>{t('search')}</span>
-            )}
+          <Button className="w-auto" loading={pending} loadingText={t('searching')} type="submit">
+            {t('search')}
           </Button>
         </FormSubmit>
       </Form>
diff --git a/core/messages/en.json b/core/messages/en.json
index fcf7ac459b..864fb64a71 100644
--- a/core/messages/en.json
+++ b/core/messages/en.json
@@ -164,7 +164,6 @@
     "SubmitRemoveItem": {
       "remove": "Remove",
       "spinnerText": "Removing...",
-      "submitText": "Remove item from cart",
       "errorMessage": "Something went wrong while removing item, please try again."
     }
   },

From 8587c4dfcf7ce97ba02acdf5ea8f08fedb7f34f3 Mon Sep 17 00:00:00 2001
From: Jorge Moya <jorge.moya@bigcommerce.com>
Date: Thu, 16 May 2024 12:33:31 -0500
Subject: [PATCH 2/4] refactor: delete button component, use ui button

---
 .../_components/change-password-form.tsx      |  2 +-
 .../cart/_components/checkout-button.tsx      |  2 +-
 .../cart/_components/coupon-code/index.tsx    |  2 +-
 .../_components/remove-from-cart-button.tsx   |  2 +-
 .../cart/_components/shipping-info/index.tsx  |  2 +-
 .../shipping-options/submit-button.tsx        |  2 +-
 .../compare/_components/add-to-cart.tsx       |  2 +-
 .../_components/change-password-form.tsx      |  2 +-
 .../login/_components/login-form.tsx          |  2 +-
 .../_components/reset-password-form/index.tsx |  2 +-
 .../register-customer-form/index.tsx          |  2 +-
 .../contact/[id]/contact-us/index.tsx         |  2 +-
 core/components/button/index.tsx              | 30 -------------------
 core/components/product-card/add-to-cart.tsx  |  2 +-
 core/components/product-form/add-to-cart.tsx  |  2 +-
 core/components/search-form/index.tsx         |  3 +-
 core/components/ui/button/button.tsx          | 24 +++++++++++++--
 17 files changed, 36 insertions(+), 49 deletions(-)
 delete mode 100644 core/components/button/index.tsx

diff --git a/core/app/[locale]/(default)/account/[tab]/_components/change-password-form.tsx b/core/app/[locale]/(default)/account/[tab]/_components/change-password-form.tsx
index 5b682982de..fafe2d5a0c 100644
--- a/core/app/[locale]/(default)/account/[tab]/_components/change-password-form.tsx
+++ b/core/app/[locale]/(default)/account/[tab]/_components/change-password-form.tsx
@@ -6,9 +6,9 @@ import { useFormState, useFormStatus } from 'react-dom';
 import { z } from 'zod';
 
 import { CustomerChangePasswordSchema } from '~/client/mutations/submit-change-password';
-import { Button } from '~/components/button';
 import { logout } from '~/components/header/_actions/logout';
 import { Link } from '~/components/link';
+import { Button } from '~/components/ui/button';
 import {
   Field,
   FieldControl,
diff --git a/core/app/[locale]/(default)/cart/_components/checkout-button.tsx b/core/app/[locale]/(default)/cart/_components/checkout-button.tsx
index f62985dc83..91b23f213e 100644
--- a/core/app/[locale]/(default)/cart/_components/checkout-button.tsx
+++ b/core/app/[locale]/(default)/cart/_components/checkout-button.tsx
@@ -3,7 +3,7 @@
 import { useTranslations } from 'next-intl';
 import { useFormStatus } from 'react-dom';
 
-import { Button } from '~/components/button';
+import { Button } from '~/components/ui/button';
 
 import { redirectToCheckout } from '../_actions/redirect-to-checkout';
 
diff --git a/core/app/[locale]/(default)/cart/_components/coupon-code/index.tsx b/core/app/[locale]/(default)/cart/_components/coupon-code/index.tsx
index bce428dadb..265e1a8933 100644
--- a/core/app/[locale]/(default)/cart/_components/coupon-code/index.tsx
+++ b/core/app/[locale]/(default)/cart/_components/coupon-code/index.tsx
@@ -7,7 +7,7 @@ import { useFormStatus } from 'react-dom';
 import { toast } from 'react-hot-toast';
 
 import { FragmentOf } from '~/client/graphql';
-import { Button } from '~/components/button';
+import { Button } from '~/components/ui/button';
 import { Field, FieldControl, FieldMessage, Form, FormSubmit } from '~/components/ui/form';
 import { Input } from '~/components/ui/input';
 
diff --git a/core/app/[locale]/(default)/cart/_components/remove-from-cart-button.tsx b/core/app/[locale]/(default)/cart/_components/remove-from-cart-button.tsx
index b425f390f2..4e5c1e60f2 100644
--- a/core/app/[locale]/(default)/cart/_components/remove-from-cart-button.tsx
+++ b/core/app/[locale]/(default)/cart/_components/remove-from-cart-button.tsx
@@ -3,7 +3,7 @@
 import { useTranslations } from 'next-intl';
 import { useFormStatus } from 'react-dom';
 
-import { Button } from '~/components/button';
+import { Button } from '~/components/ui/button';
 
 export const RemoveFromCartButton = () => {
   const { pending } = useFormStatus();
diff --git a/core/app/[locale]/(default)/cart/_components/shipping-info/index.tsx b/core/app/[locale]/(default)/cart/_components/shipping-info/index.tsx
index 5b9fb54e58..7c50c36be1 100644
--- a/core/app/[locale]/(default)/cart/_components/shipping-info/index.tsx
+++ b/core/app/[locale]/(default)/cart/_components/shipping-info/index.tsx
@@ -7,7 +7,7 @@ import { toast } from 'react-hot-toast';
 import { getShippingCountries } from '~/app/[locale]/(default)/cart/_components/shipping-estimator/get-shipping-countries';
 import { FragmentOf } from '~/client/graphql';
 import { ExistingResultType } from '~/client/util';
-import { Button } from '~/components/button';
+import { Button } from '~/components/ui/button';
 import { Field, FieldControl, FieldLabel, Form, FormSubmit } from '~/components/ui/form';
 import { Input } from '~/components/ui/input';
 import { Select, SelectContent, SelectItem } from '~/components/ui/select';
diff --git a/core/app/[locale]/(default)/cart/_components/shipping-options/submit-button.tsx b/core/app/[locale]/(default)/cart/_components/shipping-options/submit-button.tsx
index 6035888e6e..3780b1c656 100644
--- a/core/app/[locale]/(default)/cart/_components/shipping-options/submit-button.tsx
+++ b/core/app/[locale]/(default)/cart/_components/shipping-options/submit-button.tsx
@@ -1,7 +1,7 @@
 import { useTranslations } from 'next-intl';
 import { useFormStatus } from 'react-dom';
 
-import { Button } from '~/components/button';
+import { Button } from '~/components/ui/button';
 
 export const SubmitButton = () => {
   const t = useTranslations('Cart.SubmitShippingCost');
diff --git a/core/app/[locale]/(default)/compare/_components/add-to-cart.tsx b/core/app/[locale]/(default)/compare/_components/add-to-cart.tsx
index 08e2e62cfc..5bef42a7d5 100644
--- a/core/app/[locale]/(default)/compare/_components/add-to-cart.tsx
+++ b/core/app/[locale]/(default)/compare/_components/add-to-cart.tsx
@@ -3,7 +3,7 @@
 import { useTranslations } from 'next-intl';
 import { useFormStatus } from 'react-dom';
 
-import { Button } from '~/components/button';
+import { Button } from '~/components/ui/button';
 
 export const AddToCart = ({
   disabled = false,
diff --git a/core/app/[locale]/(default)/login/_components/change-password-form.tsx b/core/app/[locale]/(default)/login/_components/change-password-form.tsx
index 6a405bf282..e88a9a2faf 100644
--- a/core/app/[locale]/(default)/login/_components/change-password-form.tsx
+++ b/core/app/[locale]/(default)/login/_components/change-password-form.tsx
@@ -4,7 +4,7 @@ import { useTranslations } from 'next-intl';
 import { ChangeEvent, useRef, useState } from 'react';
 import { useFormState, useFormStatus } from 'react-dom';
 
-import { Button } from '~/components/button';
+import { Button } from '~/components/ui/button';
 import {
   Field,
   FieldControl,
diff --git a/core/app/[locale]/(default)/login/_components/login-form.tsx b/core/app/[locale]/(default)/login/_components/login-form.tsx
index 3428cacd16..3ef50ab360 100644
--- a/core/app/[locale]/(default)/login/_components/login-form.tsx
+++ b/core/app/[locale]/(default)/login/_components/login-form.tsx
@@ -4,8 +4,8 @@ import { useTranslations } from 'next-intl';
 import { ChangeEvent, useState } from 'react';
 import { useFormState, useFormStatus } from 'react-dom';
 
-import { Button } from '~/components/button';
 import { Link } from '~/components/link';
+import { Button } from '~/components/ui/button';
 import {
   Field,
   FieldControl,
diff --git a/core/app/[locale]/(default)/login/_components/reset-password-form/index.tsx b/core/app/[locale]/(default)/login/_components/reset-password-form/index.tsx
index 164b2268d3..ad8ba23429 100644
--- a/core/app/[locale]/(default)/login/_components/reset-password-form/index.tsx
+++ b/core/app/[locale]/(default)/login/_components/reset-password-form/index.tsx
@@ -6,7 +6,7 @@ import { useFormStatus } from 'react-dom';
 import ReCaptcha from 'react-google-recaptcha';
 
 import { type FragmentOf } from '~/client/graphql';
-import { Button } from '~/components/button';
+import { Button } from '~/components/ui/button';
 import {
   Field,
   FieldControl,
diff --git a/core/app/[locale]/(default)/login/register-customer/_components/register-customer-form/index.tsx b/core/app/[locale]/(default)/login/register-customer/_components/register-customer-form/index.tsx
index c0c2d498f7..d84cf3f38c 100644
--- a/core/app/[locale]/(default)/login/register-customer/_components/register-customer-form/index.tsx
+++ b/core/app/[locale]/(default)/login/register-customer/_components/register-customer-form/index.tsx
@@ -6,7 +6,7 @@ import { useFormStatus } from 'react-dom';
 import ReCaptcha from 'react-google-recaptcha';
 
 import { getRegisterCustomerQuery } from '~/app/[locale]/(default)/login/register-customer/page-data';
-import { Button } from '~/components/button';
+import { Button } from '~/components/ui/button';
 import { Field, Form, FormSubmit } from '~/components/ui/form';
 import { Message } from '~/components/ui/message';
 
diff --git a/core/app/[locale]/(default)/webpages/contact/[id]/contact-us/index.tsx b/core/app/[locale]/(default)/webpages/contact/[id]/contact-us/index.tsx
index 2e27a73eb3..57d676a13c 100644
--- a/core/app/[locale]/(default)/webpages/contact/[id]/contact-us/index.tsx
+++ b/core/app/[locale]/(default)/webpages/contact/[id]/contact-us/index.tsx
@@ -6,7 +6,7 @@ import { ChangeEvent, useRef, useState } from 'react';
 import { useFormStatus } from 'react-dom';
 import ReCaptcha from 'react-google-recaptcha';
 
-import { Button } from '~/components/button';
+import { Button } from '~/components/ui/button';
 import {
   Field,
   FieldControl,
diff --git a/core/components/button/index.tsx b/core/components/button/index.tsx
deleted file mode 100644
index 69b5fc248a..0000000000
--- a/core/components/button/index.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import { Loader2 as Spinner } from 'lucide-react';
-import React from 'react';
-
-import { ButtonProps, Button as UIButton } from '~/components/ui/button';
-import { cn } from '~/lib/utils';
-
-interface Props extends ButtonProps {
-  loadingText?: string;
-  loading?: boolean;
-}
-
-export const Button = ({
-  children,
-  className,
-  disabled,
-  loading = false,
-  loadingText,
-  ...props
-}: Props) => (
-  <UIButton className={cn(className)} disabled={disabled || loading} {...props}>
-    {loading ? (
-      <>
-        <Spinner aria-hidden="true" className="animate-spin" />
-        <span className="sr-only">{loadingText}</span>
-      </>
-    ) : (
-      children
-    )}
-  </UIButton>
-);
diff --git a/core/components/product-card/add-to-cart.tsx b/core/components/product-card/add-to-cart.tsx
index c04ceec842..0978e96f6b 100644
--- a/core/components/product-card/add-to-cart.tsx
+++ b/core/components/product-card/add-to-cart.tsx
@@ -3,7 +3,7 @@
 import { useTranslations } from 'next-intl';
 import { useFormStatus } from 'react-dom';
 
-import { Button } from '../button';
+import { Button } from '~/components/ui/button';
 
 export const AddToCart = ({ disabled = false }: { disabled?: boolean }) => {
   const { pending } = useFormStatus();
diff --git a/core/components/product-form/add-to-cart.tsx b/core/components/product-form/add-to-cart.tsx
index 41310dbc66..6eb4b59935 100644
--- a/core/components/product-form/add-to-cart.tsx
+++ b/core/components/product-form/add-to-cart.tsx
@@ -4,7 +4,7 @@ import { ShoppingCart } from 'lucide-react';
 import { useTranslations } from 'next-intl';
 import { useFormContext } from 'react-hook-form';
 
-import { Button } from '../button';
+import { Button } from '~/components/ui/button';
 
 export const AddToCart = ({ disabled = false }: { disabled?: boolean }) => {
   const { formState } = useFormContext();
diff --git a/core/components/search-form/index.tsx b/core/components/search-form/index.tsx
index 9a43babde0..21f00631d2 100644
--- a/core/components/search-form/index.tsx
+++ b/core/components/search-form/index.tsx
@@ -3,11 +3,10 @@
 import { useTranslations } from 'next-intl';
 import { useFormStatus } from 'react-dom';
 
+import { Button } from '~/components/ui/button';
 import { Field, FieldControl, Form, FormSubmit } from '~/components/ui/form';
 import { Input } from '~/components/ui/input';
 
-import { Button } from '../button';
-
 interface Props {
   initialTerm?: string;
 }
diff --git a/core/components/ui/button/button.tsx b/core/components/ui/button/button.tsx
index 209206cbc9..8b30dcab1d 100644
--- a/core/components/ui/button/button.tsx
+++ b/core/components/ui/button/button.tsx
@@ -1,5 +1,6 @@
 import { Slot } from '@radix-ui/react-slot';
 import { cva } from 'class-variance-authority';
+import { Loader2 as Spinner } from 'lucide-react';
 import { ComponentPropsWithRef, ElementRef, forwardRef } from 'react';
 
 import { cn } from '~/lib/utils';
@@ -26,15 +27,32 @@ export const buttonVariants = cva(
 export interface ButtonProps extends ComponentPropsWithRef<'button'> {
   variant?: 'primary' | 'secondary' | 'subtle';
   asChild?: boolean;
+  loading?: boolean;
+  loadingText?: string;
 }
 
 export const Button = forwardRef<ElementRef<'button'>, ButtonProps>(
-  ({ asChild = false, children, className, variant, ...props }, ref) => {
+  (
+    { asChild = false, children, className, variant, loading, loadingText, disabled, ...props },
+    ref,
+  ) => {
     const Comp = asChild ? Slot : 'button';
 
     return (
-      <Comp className={cn(buttonVariants({ variant, className }))} ref={ref} {...props}>
-        {children}
+      <Comp
+        className={cn(buttonVariants({ variant, className }))}
+        disabled={disabled || loading}
+        ref={ref}
+        {...props}
+      >
+        {loading ? (
+          <>
+            <Spinner aria-hidden="true" className="animate-spin" />
+            <span className="sr-only">{loadingText}</span>
+          </>
+        ) : (
+          children
+        )}
       </Comp>
     );
   },

From 066852042996ec344ed12b2d8bbb28fcf6f820e3 Mon Sep 17 00:00:00 2001
From: Jorge Moya <jorge.moya@bigcommerce.com>
Date: Thu, 16 May 2024 13:23:38 -0500
Subject: [PATCH 3/4] fix: keep width when loading is showing

---
 .../login/_components/login-form.tsx          | 26 ++++++++++++-------
 core/components/ui/button/button.tsx          | 11 +++++---
 2 files changed, 25 insertions(+), 12 deletions(-)

diff --git a/core/app/[locale]/(default)/login/_components/login-form.tsx b/core/app/[locale]/(default)/login/_components/login-form.tsx
index 3ef50ab360..32a05ba2d7 100644
--- a/core/app/[locale]/(default)/login/_components/login-form.tsx
+++ b/core/app/[locale]/(default)/login/_components/login-form.tsx
@@ -19,8 +19,23 @@ import { Message } from '~/components/ui/message';
 
 import { submitLoginForm } from '../_actions/submit-login-form';
 
-export const LoginForm = () => {
+const SubmitButton = () => {
   const { pending } = useFormStatus();
+  const t = useTranslations('Account.Login');
+
+  return (
+    <Button
+      className="md:w-auto"
+      loading={pending}
+      loadingText={t('Form.submitting')}
+      variant="primary"
+    >
+      {t('Form.logIn')}
+    </Button>
+  );
+};
+
+export const LoginForm = () => {
   const [isEmailValid, setIsEmailValid] = useState(true);
   const [isPasswordValid, setIsPasswordValid] = useState(true);
   const [state, formAction] = useFormState(submitLoginForm, { status: 'idle' });
@@ -100,14 +115,7 @@ export const LoginForm = () => {
         </Field>
         <div className="flex flex-col items-start md:flex-row md:items-center md:justify-start md:gap-10">
           <FormSubmit asChild>
-            <Button
-              className="w-auto"
-              loading={pending}
-              loadingText={t('Form.submitting')}
-              variant="primary"
-            >
-              {t('Form.logIn')}
-            </Button>
+            <SubmitButton />
           </FormSubmit>
           <Link
             className="my-5 inline-flex items-center justify-start text-primary hover:text-secondary md:my-0"
diff --git a/core/components/ui/button/button.tsx b/core/components/ui/button/button.tsx
index 8b30dcab1d..95bebd26ad 100644
--- a/core/components/ui/button/button.tsx
+++ b/core/components/ui/button/button.tsx
@@ -6,7 +6,7 @@ import { ComponentPropsWithRef, ElementRef, forwardRef } from 'react';
 import { cn } from '~/lib/utils';
 
 export const buttonVariants = cva(
-  'inline-flex w-full justify-center items-center border-2 py-2.5 px-[30px] text-base leading-6 font-semibold border-primary disabled:border-gray-400 focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-primary/20',
+  'relative inline-flex w-full justify-center items-center border-2 py-2.5 px-[30px] text-base leading-6 font-semibold border-primary disabled:border-gray-400 focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-primary/20',
   {
     variants: {
       variant: {
@@ -47,8 +47,13 @@ export const Button = forwardRef<ElementRef<'button'>, ButtonProps>(
       >
         {loading ? (
           <>
-            <Spinner aria-hidden="true" className="animate-spin" />
-            <span className="sr-only">{loadingText}</span>
+            <span className="absolute z-10 flex h-full w-full items-center justify-center bg-gray-400">
+              <Spinner aria-hidden="true" className="animate-spin" />
+              <span className="sr-only">{loadingText}</span>
+            </span>
+            <span aria-hidden="true" className="inline-flex">
+              {children}
+            </span>
           </>
         ) : (
           children

From 7ab22478b8d81e2c5f7b5dc0ac5772e42d149547 Mon Sep 17 00:00:00 2001
From: Jorge Moya <jorge.moya@bigcommerce.com>
Date: Fri, 17 May 2024 11:50:42 -0500
Subject: [PATCH 4/4] refactor: wrap in span and hide visibility instead

---
 core/components/ui/button/button.tsx | 20 +++++++-------------
 1 file changed, 7 insertions(+), 13 deletions(-)

diff --git a/core/components/ui/button/button.tsx b/core/components/ui/button/button.tsx
index 95bebd26ad..df61b5a779 100644
--- a/core/components/ui/button/button.tsx
+++ b/core/components/ui/button/button.tsx
@@ -6,7 +6,7 @@ import { ComponentPropsWithRef, ElementRef, forwardRef } from 'react';
 import { cn } from '~/lib/utils';
 
 export const buttonVariants = cva(
-  'relative inline-flex w-full justify-center items-center border-2 py-2.5 px-[30px] text-base leading-6 font-semibold border-primary disabled:border-gray-400 focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-primary/20',
+  'relative flex w-full justify-center items-center border-2 py-2.5 px-[30px] text-base leading-6 font-semibold border-primary disabled:border-gray-400 focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-primary/20',
   {
     variants: {
       variant: {
@@ -45,19 +45,13 @@ export const Button = forwardRef<ElementRef<'button'>, ButtonProps>(
         ref={ref}
         {...props}
       >
-        {loading ? (
-          <>
-            <span className="absolute z-10 flex h-full w-full items-center justify-center bg-gray-400">
-              <Spinner aria-hidden="true" className="animate-spin" />
-              <span className="sr-only">{loadingText}</span>
-            </span>
-            <span aria-hidden="true" className="inline-flex">
-              {children}
-            </span>
-          </>
-        ) : (
-          children
+        {loading && (
+          <span className="absolute z-10 flex h-full w-full items-center justify-center">
+            <Spinner aria-hidden="true" className="animate-spin" />
+            <span className="sr-only">{loadingText}</span>
+          </span>
         )}
+        <span className={cn('flex items-center', loading && 'invisible')}>{children}</span>
       </Comp>
     );
   },