From e7f466248e55fe03c8f7d54d186f59c5878f3a23 Mon Sep 17 00:00:00 2001
From: Piotr Grundas <piotrgrundas@gmail.com>
Date: Fri, 14 Dec 2018 17:44:27 +0100
Subject: [PATCH] [138] Reduced animation speed, hover effect + disabling
 actions while animating

---
 CHANGELOG.md                                  |  1 +
 .../ProductDescription/AddToCartButton.tsx    | 30 ++++++++++++-------
 .../ProductDescription/scss/index.scss        |  3 +-
 3 files changed, 23 insertions(+), 11 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 552a6bfa9d..88564f798d 100644
--- a/CHANGELOG.md
+++ b/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
diff --git a/src/components/ProductDescription/AddToCartButton.tsx b/src/components/ProductDescription/AddToCartButton.tsx
index 4cd6f8df39..e1a3aacf75 100644
--- a/src/components/ProductDescription/AddToCartButton.tsx
+++ b/src/components/ProductDescription/AddToCartButton.tsx
@@ -2,29 +2,36 @@ import * as React from "react";
 
 import classNames from "classnames";
 import ReactCSSTransitionGroup from "react-addons-css-transition-group";
-import { Button, ButtonProps } from "..";
+import { Button, ButtonProps, Debounce } 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
diff --git a/src/components/ProductDescription/scss/index.scss b/src/components/ProductDescription/scss/index.scss
index 6d2133a48f..5359a003c1 100644
--- a/src/components/ProductDescription/scss/index.scss
+++ b/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;