[Repertory release notification icon] [Prevent release change when mount is busy] [Initial loading animation]

src/components/UI/Loading/Loading.css

@@ -0,0 +1,16 @@
+.Loading {
+  margin: 0;
+  padding: 0;
+  height: 100%;
+  width: 100%;
+}
+
+.Content {
+  margin: 0;
+  padding: 0;
+  position: relative;
+  top: 50%; left: 50%;
+  transform: translate(-50%,-50%);
+  width: 28px;
+  height: 28px;
+}

src/components/UI/Loading/Loading.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import CSSModules from 'react-css-modules';
+import styles from './Loading.css'
+import Loader from 'react-loader-spinner';
+
+export default CSSModules((props) => {
+  return (
+    <div
+      styleName='Loading'>
+      <div styleName='Content'>
+        <Loader color={'var(--heading_text_color)'}
+                height='28px'
+                width='28px'
+                type='ThreeDots'/>
+      </div>
+    </div>);
+}, styles, {allowMultiple: true});

src/components/UpgradeIcon/UpgradeIcon.css

@@ -7,8 +7,5 @@
   border: 0;
   box-sizing: border-box;
   cursor: pointer;
-}
-
-div.UpgradeIcon {
-  cursor: default;
+  opacity: 0.65;
 }

src/components/UpgradeIcon/UpgradeIcon.js

@@ -1,10 +1,15 @@
 import React from 'react';
 import CSSModules from 'react-css-modules';
 import styles from './UpgradeIcon.css';
-import availableImage from '../../assets/images/upgrade_available.png';
+import availableImage from '../../assets/images/release_available.png';
 
 export default CSSModules((props) => {
+  let style;
+  if (props.release) {
+    style = {float: 'right', marginRight: '5%', cursor: 'default'};
+  }
+
   return props.available ?
-    <img alt='' styleName='UpgradeIcon' src={availableImage} onClick={props.clicked}/> :
-    <div styleName='UpgradeIcon'/> ;
+    <img alt='' style={style} styleName='UpgradeIcon' src={availableImage} onClick={props.clicked}/> :
+    null;
 }, styles, {allowMultiple: true});