added comments and improved spin animation a little

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

@@ -3,6 +3,10 @@ const PropTypes = require('prop-types');
 
 /**
  * Higher-order component for building an animated studio button
+ * it is used to decorate the onToggleStudio function with noticing
+ * when the button has first been clicked.
+ * This is needed so the buttons don't play the animation when they are
+ * first rendered but when they are first clicked.
  * @param  {React.Component} Component a studio button component
  * @return {React.Component}           a wrapped studio button component
  */
@@ -19,12 +23,12 @@ const AnimateHOC = Component => {
             this.handleClick = this.handleClick.bind(this);
         }
         handleClick () {
-            if (this.state.wasClicked) {
+            if (this.state.wasClicked) { // if the button has been clicked before
                 this.props.onClick(this.props.id);
             } else {
-                this.setState({
+                this.setState({ // else tell the state that the button has been clicked
                     wasClicked: true
-                }, () => this.props.onClick(this.props.id));
+                }, () => this.props.onClick(this.props.id)); // callback after state has been updated
             }
         }
         render () {

src/components/modal/addtostudio/modal.scss

@@ -179,6 +179,8 @@
 }
 
 .studio-status-icon-spinner {
+    /* This class can be used on an icon that should spin.
+    It first plays the intro animation, then spins forever. */
     animation-name: intro, spin;
     -webkit-animation-name: intro, spin;
     animation-duration: .25s, .5s;
@@ -187,8 +189,8 @@
     -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;
+    animation-timing-function: cubic-bezier(0.3, -3, 0.6, 3), linear;
+    -webkit-animation-timing-function: cubic-bezier(0.3, -3, 0.6, 3), linear;
 }
 
 @keyframes intro {
@@ -204,6 +206,9 @@
   }
 }
 
+/* intro and bump look the same but for some reason,
+I need two keyframes and if I don't make two separate ones the
+animations don't get called. */
 @keyframes bump {
   0% {
     transform: scale(0);