Merge pull request #2239 from iminoso/loading

Add throbber while waiting for builds to load

static/css/directives/components/pages/repo-page/body.scss

@@ -2,6 +2,10 @@
   font-size: 16px;
 }
 
+.rp-throbber {
+  position: relative;
+}
+
 .rp-panelBody {
   padding: 15px 30px;
 }

static/js/directives/components/pages/repo-page/body.tsx

@@ -1,5 +1,7 @@
 import * as React from "react";
+
 import Build from "./build";
+import Throbber from "./throbber";
 
 interface IBody {
   description: string;
@@ -90,9 +92,9 @@ class body extends React.Component<IBody, IBodyState> {
                   <div className="tab-pane in active" id="tab1">
                     <div className="rp-description">{description}</div>
                   </div>
-                  <div className="tab-pane" id="tab2">
+                  <div className="tab-pane" id="tab2">                    
-                    <h3 className="tab-header">Repository Builds</h3>
                     <div className="panel-body">
+                      <h3 className="tab-header">Repository Builds</h3>
                         <Build data={this.state.currentBuild}/>
                     </div>
                   </div>

static/js/directives/components/pages/repo-page/build.tsx

@@ -1,14 +1,19 @@
 import * as React from 'react';
 import * as moment from "moment";
 
+import Throbber from "./throbber";
+
 export default class Build extends React.Component<any, any> {
   render () {
     let builds: any = this.props.data;
     let buildsTable: any = [];
+    let table: any;
     if (Object.keys(builds).length === 0) {
       buildsTable.push('Loading')
+      table = <Throbber />
     }
     else {
+      // Get Builds
       builds.forEach((element, i) => {
         let tags: Array<any> = []
         element.tags.forEach(tag => {
@@ -31,22 +36,29 @@ export default class Build extends React.Component<any, any> {
           </tr>
         )
       });
+      // Build the table
+      table = (
+        <table className="co-table">
+          <thead>
+            <tr>
+              <td></td>
+              <td>BUILD ID</td>
+              <td>TRIGGERED BY</td>
+              <td>DATE STARTED</td>
+              <td>TAGS</td>
+            </tr>
+          </thead>
+          <tbody>
+            {buildsTable}
+          </tbody>
+        </table>
+      );
     }
     return(
-      <table className="co-table">
+      <div className="row">
-        <thead>
+        {table}
-          <tr>
+      </div>
-            <td></td>
-            <td>BUILD ID</td>
-            <td>TRIGGERED BY</td>
-            <td>DATE STARTED</td>
-            <td>TAGS</td>
-          </tr>
-        </thead>
-        <tbody>
-          {buildsTable}
-        </tbody>
-      </table>
     );
   }
-}
+}
+

static/js/directives/components/pages/repo-page/throbber.tsx

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import * as moment from "moment";
+
+export default class Throbber extends React.Component<any, any> {
+  render () {
+    return(
+      <div className="co-m-loader co-an-fade-in-out rp-throbber">
+        <div className="co-m-loader-dot__one"></div>
+        <div className="co-m-loader-dot__two"></div>
+        <div className="co-m-loader-dot__three"></div>
+      </div>
+    );
+  }
+}
+