[138] Reduced animation speed, hover effect + disabling actions while…

… animating

CHANGELOG.md

@@ -4,3 +4,4 @@ All notable, unreleased changes to this project will be documented in this file.
 ## [Unreleased]
 Hide filters and sorting when there are no search results, add trending products to empty search, categories #151 by @piotrgrundas
 Add fetching menus from the API #127 by @piotrgrundas
+Add add to cart indicator #138 by @piotrgrundas

src/components/ProductDescription/AddToCartButton.tsx

@@ -6,25 +6,32 @@ import { Button, ButtonProps } from "..";
 
 interface AddToCartButtonState {
   animate: boolean;
+  disabled: boolean;
 }
 
 class AddToCartButton extends React.PureComponent<
   ButtonProps,
   AddToCartButtonState
 > {
-  state = { animate: false };
+  state = { animate: false, disabled: false };
   animationTimeout = 800;
   timeout;
 
   handleAnimation = (evt: React.MouseEvent<HTMLButtonElement>) => {
-    clearTimeout(this.timeout);
-    this.props.onClick(evt);
-
-    this.setState({ animate: true }, () => {
-      this.timeout = setTimeout(() => {
-        this.setState({ animate: false });
-      }, this.animationTimeout);
-    });
+    if (!this.state.disabled) {
+      this.props.onClick(evt);
+
+      this.setState({ animate: true, disabled: true }, () => {
+        setTimeout(() => {
+          this.setState({ animate: false }, () => {
+            setTimeout(
+              () => this.setState({ disabled: false }),
+              this.animationTimeout
+            );
+          });
+        }, this.animationTimeout);
+      });
+    }
   };
 
   render() {
@@ -33,6 +40,9 @@ class AddToCartButton extends React.PureComponent<
     return (
       <Button
         {...this.props}
+        className={classNames(this.props.className, {
+          "product-description__action--fade": animate
+        })}
         onClick={this.handleAnimation}
       >
         <ReactCSSTransitionGroup

src/components/ProductDescription/scss/index.scss

@@ -34,7 +34,8 @@
     min-height: 49px;
 
     &--fade {
-      $animation-speed: 500ms;
+      $animation-speed: 200ms;
+      background-color: $turquoise-dark;
 
       &-enter {
         opacity: 0;