Loading State for Button

components/product/ProductView/ProductView.tsx

@@ -4,7 +4,7 @@ import { FC, useState } from 'react'
 import s from './ProductView.module.css'
 import { Colors } from '@components/ui/types'
 import { useUI } from '@components/ui/context'
-import { Button, Container } from '@components/ui'
+import { Button, Container, LoadingDots } from '@components/ui'
 import { Swatch, ProductSlider } from '@components/product'
 import useAddItem from '@lib/bigcommerce/cart/use-add-item'
 import type { Product } from '@lib/bigcommerce/api/operations/get-product'
@@ -25,18 +25,28 @@ const SIZES = ['s', 'm', 'l', 'xl', 'xxl']
 const ProductView: FC<Props> = ({ product, className }) => {
   const addItem = useAddItem()
   const { openSidebar } = useUI()
+
   const [choices, setChoices] = useState<Choices>({
     size: null,
     color: null,
   })
 
+  const [loading, setLoading] = useState(false)
+
   const addToCart = async () => {
-    // TODO: loading state by awating the promise
-    await addItem({
-      productId: product.entityId,
-      variantId: product.variants.edges?.[0]?.node.entityId!,
-    })
-    openSidebar()
+    setLoading(true)
+
+    try {
+      await addItem({
+        productId: product.entityId,
+        variantId: product.variants.edges?.[0]?.node.entityId!,
+      })
+      openSidebar()
+      setLoading(false)
+    } catch (err) {
+      // Error err.
+      setLoading(false)
+    }
   }
 
   const activeSize = choices.size
@@ -75,11 +85,16 @@ const ProductView: FC<Props> = ({ product, className }) => {
         <div className="flex-1 px-24 pb-0 relative fit  box-border">
           <div className="absolute z-10 inset-0 flex items-center justify-center">
             <ProductSlider>
-              {product.images.edges?.map((image) => (
-                <img className="w-full object-cover" src={image?.node.urlXL} />
+              {product.images.edges?.map((image, i) => (
+                <img
+                  className="w-full object-cover"
+                  src={image?.node.urlXL}
+                  loading={i === 0 ? 'eager' : 'lazy'}
+                />
               ))}
             </ProductSlider>
           </div>
+
           <div className="absolute z-10 bottom-10 left-1/2 transform -translate-x-1/2 inline-block">
             <img src="/slider-arrows.png" />
           </div>
@@ -128,7 +143,12 @@ const ProductView: FC<Props> = ({ product, className }) => {
             />
           </section>
           <section className="">
-            <Button type="button" className={s.button} onClick={addToCart}>
+            <Button
+              type="button"
+              className={s.button}
+              onClick={addToCart}
+              loading={loading}
+            >
               Add to Cart
             </Button>
           </section>

components/ui/Button/Button.module.css

@@ -2,7 +2,7 @@
   @apply text-secondary cursor-pointer inline-flex px-10 rounded-sm leading-6
   bg-secondary transition ease-in-out duration-150 shadow-sm font-semibold
   text-center justify-center uppercase py-4 uppercase text-center focus:outline-none
-  border border-transparent;
+  border border-transparent items-center;
 }
 
 .root:hover {
@@ -17,6 +17,6 @@
   @apply bg-gray-600;
 }
 
-s.filled {
-  @apply text-white bg-black;
+.loading {
+  @apply bg-accent-1 text-accent-3 border-accent-2 cursor-not-allowed;
 }

components/ui/Button/Button.tsx

@@ -8,7 +8,7 @@ import React, {
 import mergeRefs from 'react-merge-refs'
 import { useButton } from 'react-aria'
 import s from './Button.module.css'
-
+import { LoadingDots } from '@components/ui'
 export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   href?: string
   className?: string
@@ -17,6 +17,7 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   type?: 'submit' | 'reset' | 'button'
   Component?: string | JSXElementConstructor<any>
   width?: string | number
+  loading?: boolean
 }
 
 const Button: React.FC<ButtonProps> = forwardRef((props, buttonRef) => {
@@ -30,6 +31,7 @@ const Button: React.FC<ButtonProps> = forwardRef((props, buttonRef) => {
     disabled,
     width,
     Component = 'button',
+    loading = false,
     ...rest
   } = props
   const ref = useRef<typeof Component>(null)
@@ -47,7 +49,7 @@ const Button: React.FC<ButtonProps> = forwardRef((props, buttonRef) => {
   const rootClassName = cn(
     s.root,
     {
-      [s.filled]: variant === 'filled',
+      [s.loading]: loading,
     },
     className
   )
@@ -66,6 +68,11 @@ const Button: React.FC<ButtonProps> = forwardRef((props, buttonRef) => {
       data-active={isPressed ? '' : undefined}
     >
       {children}
+      {loading && (
+        <i className="pl-2 m-0 flex">
+          <LoadingDots />
+        </i>
+      )}
     </Component>
   )
 })

components/ui/LoadingDots/LoadingDots.module.css

@@ -0,0 +1,32 @@
+@keyframes blink {
+  0% {
+    opacity: 0.2;
+  }
+  20% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0.2;
+  }
+}
+
+.loading {
+  @apply inline-flex text-center items-center leading-7;
+
+  & span {
+    @apply bg-accent-6 rounded-full h-2 w-2;
+    animation-name: blink;
+    animation-duration: 1.4s;
+    animation-iteration-count: infinite;
+    animation-fill-mode: both;
+    margin: 0 2px;
+
+    &:nth-of-type(2) {
+      animation-delay: 0.2s;
+    }
+
+    &:nth-of-type(3) {
+      animation-delay: 0.4s;
+    }
+  }
+}

components/ui/LoadingDots/LoadingDots.tsx

@@ -0,0 +1,13 @@
+import s from './LoadingDots.module.css'
+
+const LoadingDots: React.FC = () => {
+  return (
+    <span className={s.loading}>
+      <span />
+      <span />
+      <span />
+    </span>
+  )
+}
+
+export default LoadingDots

components/ui/LoadingDots/index.ts

@@ -0,0 +1 @@
+export { default } from './LoadingDots'

components/ui/Logo/index.ts

@@ -1 +0,0 @@
-export { default } from './Logo'

components/ui/index.ts

@@ -1,7 +1,8 @@
-export { default as Button } from './Button'
-export { default as Container } from './Container'
-export { default as Sidebar } from './Sidebar'
-export { default as Logo } from './Logo'
-export { default as Grid } from './Grid'
-export { default as Marquee } from './Marquee'
 export { default as Hero } from './Hero'
+export { default as Logo } from './LoadingDots'
+export { default as Grid } from './Grid'
+export { default as Button } from './Button'
+export { default as Sidebar } from './Sidebar'
+export { default as Marquee } from './Marquee'
+export { default as Container } from './Container'
+export { default as LoadingDots } from './LoadingDots'

tailwind.config.js

@@ -15,9 +15,12 @@ module.exports = {
       },
       colors: {
         'accent-1': '#FAFAFA',
-        'accent-2': '#F1F3F5',
+        'accent-2': '#eaeaea',
+        'accent-3': '#999999',
         'accent-4': '#888',
-        'accent-6': '#E5E5E5',
+        'accent-5': '#666666',
+        'accent-6': '#444444',
+        'accent-7': '#333333',
         'accent-8': '#111111',
         violet: '#7928CA',
         pink: '#FF0080',