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;
@@ -91,8 +93,8 @@ class body extends React.Component<IBody, IBodyState> {
                     <div className="rp-description">{description}</div>
                   </div>
                   <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,8 +36,8 @@ export default class Build extends React.Component<any, any> {
           </tr>
         )
       });
-    }
-    return(
+      // Build the table
+      table = (
         <table className="co-table">
           <thead>
             <tr>
@@ -49,4 +54,11 @@ export default class Build extends React.Component<any, any> {
         </table>
       );
     }
+    return(
+      <div className="row">
+        {table}
+      </div>
+    );
   }
+}
+

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>
+    );
+  }
+}
+