add studio buttons animation on preview page, need fixing

src/components/modal/addtostudio/animate-hoc.jsx

+const React = require('react');
+const PropTypes = require('prop-types');
+
+/**
+ * Higher-order component for building an animated studio button
+ * @param  {React.Component} Component a studio button component
+ * @return {React.Component}           a wrapped studio button component
+ */
+
+const AnimateHOC = ({
+    Component
+}) => {
+    class WrappedComponent extends React.Component {
+        constructor(props) {
+            super(props);
+            let wasClicked = false;
+        }
+        onClick () {
+            this.wasClicked = true; // BUT PROPS ARE READONLY?
+        }
+        render () {
+            return (<Component
+                wasClicked={this.wasClicked}
+                {...this.props}
+            />);
+        }
+    }
+
+    return WrappedComponent;
+};
+
+AnimateHOC.propTypes = {
+    Component: PropTypes.element
+};

src/components/modal/addtostudio/modal.scss

@@ -89,7 +89,6 @@
     pointer-events: none; /* pass clicks through to buttons underneath */
 }
 
-
 .studio-selector-button {
     display: flex;
     position: relative;
@@ -102,6 +101,7 @@
     height: 2.5rem;
     box-sizing: border-box;
     justify-content: space-between;
+    transition: all .5s;
 }
 
 .studio-selector-button-text {
@@ -164,30 +164,67 @@
     background-color: $ui-blue;
 }
 
-.studio-status-icon-plus-img {
-    width: 1.4rem;
-    height: 1.4rem;
-}
-
-.studio-status-icon--img {
-    width: 1.4rem;
-    height: 1.4rem;
-}
-
-.action-button-text .spinner-smooth {
-    margin: .2125rem auto;
-    width: 1.875rem;
-    height: 1rem;
-}
-
-.studio-status-icon .spinner-smooth {
-    position: unset; /* don't understand why neither relative nor absolute work */
-}
-
-.studio-status-icon .spinner-smooth .circle {
-    /* overlay spinner on circle */
-    position: absolute;
-    margin: .1875rem; /* stay within boundaries of circle */
-    width: 75%; /* stay within boundaries of circle */
-    height: 75%; /* stay within boundaries of circle */
+.studio-status-icon-plus-img, .studio-status-icon-checkmark-img, .studio-status-icon-spinner {
+  width: 1.4rem;
+  height: 1.4rem;
+  transform-origin: center;
+  animation-direction: normal;
+}
+
+.studio-status-icon-with-animation {
+  animation-duration: .25s;
+  animation-name: bump;
+  animation-iteration-count: 1;
+  animation-timing-function: cubic-bezier(0.3, -3, 0.6, 3);
+}
+
+.studio-status-icon-spinner {
+    animation-name: bump, spin;
+    -webkit-animation-name: bump, spin;
+    animation-duration: .25s, .5s;
+    -webkit-animation-duration: .25s, .5s;
+    animation-iteration-count: 1, infinite;
+    -webkit-animation-iteration-count: 1, infinite;
+    animation-delay: 0s, .25s;
+    -webkit-animation-delay: 0s, .25s;
+    animation-timing-function: cubic-bezier(0.3, -3, 0.6, 3), ease-in-out;
+    -webkit-animation-timing-function: cubic-bezier(0.3, -3, 0.6, 3), ease-in-out;
+}
+
+@keyframes intro {
+  0% {
+    transform: scale(0);
+    -webkit-transform: scale(0);
+    opacity: 0;
+  }
+  100% {
+    transform: scale(1);
+    -webkit-transform: scale(1);
+    opacity: 1;
+  }
+}
+
+@keyframes bump {
+  0% {
+    transform: scale(0);
+    -webkit-transform: scale(0);
+    opacity: 0;
+  }
+  100% {
+    transform: scale(1);
+    -webkit-transform: scale(1);
+    opacity: 1;
+  }
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0);
+    -webkit-transform: rotate(0);
+  }
+
+  100% {
+    transform: rotate(359deg);
+    -webkit-transform: rotate(359deg);
+  }
 }

src/components/modal/addtostudio/studio-button.jsx

 const PropTypes = require('prop-types');
 const React = require('react');
 const classNames = require('classnames');
-const Spinner = require('../../spinner/spinner.jsx');
+const AnimateHOC = require('./animate-hoc');
 
 require('./modal.scss');
 
@@ -10,19 +10,33 @@ const StudioButton = ({
     id,
     includesProject,
     title,
-    onToggleStudio
+    onToggleStudio,
+    wasClicked
 }) => {
     const checkmark = (
         <img
             alt="checkmark-icon"
-            className="studio-status-icon-checkmark-img"
+            className={classNames(
+                {'studio-status-icon-with-animation': true},
+                'studio-status-icon-checkmark-img'
+            )}
             src="/svgs/modal/confirm.svg"
         />
     );
+    const spinner = (
+        <img
+            alt="loading animation"
+            className="studio-status-icon-spinner"
+            src="/svgs/modal/spinner.svg"
+        />
+    );
     const plus = (
         <img
             alt="plus-icon"
-            className="studio-status-icon-plus-img"
+            className={classNames(
+                {'studio-status-icon-with-animation': true},
+                'studio-status-icon-plus-img'
+            )}
             src="/svgs/modal/add.svg"
         />
     );
@@ -45,16 +59,16 @@ const StudioButton = ({
                 )}
                 title={title}
             >
-                {title}
+                {title}{wasClicked}
             </div>
             <div
                 className={classNames(
                     'studio-status-icon',
-                    {'studio-status-icon-unselected': !includesProject}
+                    {'studio-status-icon-unselected': !includesProject && !hasRequestOutstanding}
                 )}
             >
                 {(hasRequestOutstanding ?
-                    (<Spinner mode="smooth" />) :
+                    spinner :
                     (includesProject ? checkmark : plus))}
             </div>
         </div>
@@ -66,7 +80,8 @@ StudioButton.propTypes = {
     id: PropTypes.number,
     includesProject: PropTypes.bool,
     onToggleStudio: PropTypes.func,
-    title: PropTypes.string
+    title: PropTypes.string,
+    wasClicked: PropTypes.bool
 };
 
-module.exports = StudioButton;
+module.exports = AnimateHOC(StudioButton);