component for busy indicator, use in my_files

js/component/common.js

@@ -27,6 +27,15 @@ var TruncatedText = React.createClass({
   }
 });
 
+var BusyMessage = React.createClass({
+  propTypes: {
+    message: React.PropTypes.string
+  },
+  render: function() {
+    return <span>{this.props.message} <span className="busy-indicator"></span></span>
+  }
+});
+
 var toolTipStyle = {
   position: 'absolute',
   zIndex: '1',

js/component/splash.js

@@ -52,8 +52,7 @@ var SplashScreen = React.createClass({
         <img src={imgSrc} alt="LBRY"/>
         <div style={splashMessageStyle}>
           <h3>
-            {this.props.message}
-            <span className="busy-indicator"></span>
+            <BusyMessage message={this.props.message} />
           </h3>
           <Icon icon='icon-warning' style={this.state.isLagging ? {} : { display: 'none' }}/> <span style={ this.state.isLagging ? {} : {'color': '#c3c3c3'} }>{this.state.details}</span>
         </div>

js/page/discover.js

@@ -8,8 +8,7 @@ var SearchActive = React.createClass({
   render: function() {
     return (
       <div style={fetchResultsStyle}>
-        Looking up the Dewey Decimals
-        <span className="busy-indicator"></span>
+        <BusyMessage message="Looking up the Dewey Decimals" />
       </div>
     );
   }

js/page/my_files.js

@@ -160,7 +160,7 @@ var MyFilesPage = React.createClass({
     if (this.state.filesInfo === null) {
       return (
         <main className="page">
-          <span>Loading...</span>
+          <BusyMessage message="Loading" />
         </main>
       );
     }