refactor: wrap in span and hide visibility instead

bigcommerce · May 17, 2024 · 7ab2247 · 7ab2247
1 parent 0668520
commit 7ab2247
Showing 1 changed file with 7 additions and 13 deletions.
diff --git 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>
     );
   },