CircularProgress -> Loading

js/src/ui/Loading/loading.js

@@ -14,30 +14,32 @@
 // You should have received a copy of the GNU General Public License
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
-import React, { Component, PropTypes } from 'react';
+import React, { PropTypes } from 'react';
 import CircularProgress from 'material-ui/CircularProgress';
 
 import styles from './loading.css';
 
-export default class Loading extends Component {
-  static propTypes = {
-    className: PropTypes.string,
-    size: PropTypes.number
-  };
+export function Loading ({ className, size, thickness }) {
+  const computedSize = size * 60;
 
-  static defaultProps = {
-    className: '',
-    size: 2
-  };
-
-  render () {
-    const { className, size } = this.props;
-    const computedSize = size * 60;
-
-    return (
-      <div className={ [ styles.loading, className ].join(' ') }>
-        <CircularProgress size={ computedSize } />
-      </div>
-    );
-  }
+  return (
+    <div className={ [ styles.loading, className ].join(' ') }>
+      <CircularProgress
+        size={ computedSize }
+        thickness={ thickness }
+      />
+    </div>
+  );
 }
+
+Loading.propTypes = {
+  className: PropTypes.string,
+  size: PropTypes.number,
+  thickness: PropTypes.number
+};
+
+Loading.defaultProps = {
+  className: '',
+  size: 2,
+  thickness: 3.5
+};

js/src/ui/MethodDecoding/methodDecoding.js

@@ -14,13 +14,13 @@
 // You should have received a copy of the GNU General Public License
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
-import { CircularProgress } from 'material-ui';
 import moment from 'moment';
 import React, { Component, PropTypes } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { connect } from 'react-redux';
 
 import { TypedInput, InputAddress } from '../Form';
+import { Loading } from '../Loading';
 import MethodDecodingStore from './methodDecodingStore';
 
 import styles from './methodDecoding.css';
@@ -99,7 +99,7 @@ class MethodDecoding extends Component {
     if (isLoading) {
       return (
         <div className={ styles.loading }>
-          <CircularProgress size={ 60 } thickness={ 2 } />
+          <Loading size={ 1 } thickness={ 2 } />
         </div>
       );
     }

js/src/views/ContractDevelop/contractDevelop.js

@@ -19,11 +19,10 @@ import { FormattedMessage } from 'react-intl';
 import { observer } from 'mobx-react';
 import { MenuItem, Toggle } from 'material-ui';
 import { connect } from 'react-redux';
-import CircularProgress from 'material-ui/CircularProgress';
 import moment from 'moment';
 import { throttle } from 'lodash';
 
-import { Actionbar, ActionbarExport, ActionbarImport, Button, Page, Select, Input } from '~/ui';
+import { Actionbar, ActionbarExport, ActionbarImport, Button, Input, Loading, Page, Select } from '~/ui';
 import { CancelIcon, ListIcon, SaveIcon, SendIcon, SettingsIcon } from '~/ui/Icons';
 import Editor from '~/ui/Editor';
 import { DeployContract, SaveContract, LoadContract } from '~/modals';
@@ -292,8 +291,8 @@ class ContractDevelop extends Component {
     if (selectedBuild < 0) {
       return (
         <div className={ `${styles.panel} ${styles.centeredMessage}` }>
-          <CircularProgress
-            size={ 80 }
+          <Loading
+            size={ 1.2 }
             thickness={ 5 }
           />
           <p>
@@ -312,8 +311,8 @@ class ContractDevelop extends Component {
       return (
         <div className={ styles.panel }>
           <div className={ styles.centeredMessage }>
-            <CircularProgress
-              size={ 80 }
+            <Loading
+              size={ 1.2 }
               thickness={ 5 }
             />
             <p>
@@ -495,8 +494,8 @@ class ContractDevelop extends Component {
     if (compiling) {
       return (
         <div className={ styles.centeredMessage }>
-          <CircularProgress
-            size={ 80 }
+          <Loading
+            size={ 1.2 }
             thickness={ 5 }
           />
           <p>