Merge pull request #33 from lbryio/sonatagreen-myfiles-loading

Sonatagreen myfiles loading

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}
+            <BusyMessage message={this.props.message} />
-            <span className="busy-indicator"></span>
           </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
+        <BusyMessage message="Looking up the Dewey Decimals" />
-        <span className="busy-indicator"></span>
       </div>
     );
   }

js/page/my_files.js

@@ -158,7 +158,11 @@ var MyFilesPage = React.createClass({
   },
   render: function() {
     if (this.state.filesInfo === null) {
-      return null;
+      return (
+        <main className="page">
+          <BusyMessage message="Loading" />
+        </main>
+      );
     }
 
     if (!this.state.filesInfo.length) {

js/page/wallet.js

@@ -99,7 +99,7 @@ var SendToAddressSection = React.createClass({
             <h4>Results</h4>
             {this.state.results}
           </div>
-          : ''
+            : ''
         }
       </section>
     );
@@ -111,8 +111,8 @@ var WalletPage = React.createClass({
     document.title = "My Wallet";
   },
   /*
-  Below should be refactored so that balance is shared all of wallet page. Or even broader?
+   Below should be refactored so that balance is shared all of wallet page. Or even broader?
-  What is the proper React pattern for sharing a global state like balance?
+   What is the proper React pattern for sharing a global state like balance?
    */
   getInitialState: function() {
     return {
@@ -142,4 +142,4 @@ var WalletPage = React.createClass({
       </main>
     );
   }
-});
+});