4
0
forked from crowetic/commerce

Loading State for Button

This commit is contained in:
Belen Curcio 2020-10-14 17:21:29 -03:00
parent c06073ea55
commit 04d79f1f7f
9 changed files with 100 additions and 24 deletions

View File

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

View File

@ -2,7 +2,7 @@
@apply text-secondary cursor-pointer inline-flex px-10 rounded-sm leading-6 @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 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 text-center justify-center uppercase py-4 uppercase text-center focus:outline-none
border border-transparent; border border-transparent items-center;
} }
.root:hover { .root:hover {
@ -17,6 +17,6 @@
@apply bg-gray-600; @apply bg-gray-600;
} }
s.filled { .loading {
@apply text-white bg-black; @apply bg-accent-1 text-accent-3 border-accent-2 cursor-not-allowed;
} }

View File

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

View File

@ -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;
}
}
}

View File

@ -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

View File

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

View File

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

View File

@ -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 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'

View File

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