- Move spinner class computation into separate method

- Add comment blocks around different parts of template to define boundaries

1 files changed, 36 insertions, 3 deletions

diff --git a/app/components/Connect.js b/app/components/Connect.js
index ffd0e37df6..5e44fdd8ae 100644
--- a/app/components/Connect.js
+++ b/app/components/Connect.js
@@ -88,12 +88,18 @@ export default class Connect extends Component {
 
               <div className="connect__status">
                 { /* show spinner when connecting */ }
-                <div className={ ['connect__status-icon', (isConnecting ? '' : 'connect__status-icon--hidden' )].join(' ') }>
+                <div className={ this.spinnerClass() }>
                   <img src="./assets/images/icon-spinner.svg" alt="" />
                 </div>
                 
                 <div className={ this.networkSecurityClass() }>{ this.networkSecurityMessage() }</div>
 
+                { /*
+                  **********************************
+                  Begin: Location block
+                  **********************************
+                */ }
+
                 { /* location when connecting */ }
                 <If condition={ isConnecting }>
                   <Then>
@@ -146,11 +152,24 @@ export default class Connect extends Component {
                   </Then>
                 </If>
 
+                { /*
+                  **********************************
+                  End: Location block
+                  **********************************
+                */ }
+
                 <div className={ this.ipAddressClass() }>{ this.props.connect.clientIp }</div>
               </div>
 
-              { /* footer when disconnected */ }
-              <If condition={ isDisconnected }>
+
+              { /*
+                **********************************
+                Begin: Footer block
+                **********************************
+              */ }
+
+              { /* footer when disconnected or failed */ }
+              <If condition={ isDisconnected || isFailed }>
                 <Then>
                   <div className="connect__footer">
                     <div className="connect__row">
@@ -214,6 +233,12 @@ export default class Connect extends Component {
                 </Then>
               </If>
 
+              { /*
+                **********************************
+                End: Footer block
+                **********************************
+              */ }
+
             </div>
           </div>
         </Container>
@@ -259,6 +284,14 @@ export default class Connect extends Component {
     }
   }
 
+  spinnerClass() {
+    var classes = ['connect__status-icon'];
+    if(this.props.connect.status !== ConnectionState.connecting) {
+      classes.push('connect__status-icon--hidden');
+    }
+    return classes.join(' ');
+  }
+
   ipAddressClass() {
     var classes = ['connect__status-ipaddress'];
     if(this.props.connect.status === ConnectionState.connecting) {