loading icon for piece list

.eslintignore

@@ -2,4 +2,6 @@
 gulpfile.js
 node_modules
 
-js/**/__tests__
+js/**/__tests__
+
+server.js

js/components/ascribe_accordion_list/accordion_list.js

@@ -2,11 +2,11 @@
 
 import React from 'react';
 
-
 let AccordionList = React.createClass({
     propTypes: {
         className: React.PropTypes.string,
-        children: React.PropTypes.arrayOf(React.PropTypes.element).isRequired
+        children: React.PropTypes.arrayOf(React.PropTypes.element).isRequired,
+        loadingElement: React.PropTypes.element
     },
     
     render() {
@@ -18,7 +18,9 @@ let AccordionList = React.createClass({
             );
         } else {
             return (
-                <p>Loading</p>
+                <div className={this.props.className + ' ascribe-accordion-list-loading'}>
+                    {this.props.loadingElement}
+                </div>
             );
         }
     }

js/components/ascribe_buttons/button_submit_close.js

@@ -13,7 +13,7 @@ let ButtonSubmitOrClose = React.createClass({
         if (this.props.submitted){
             return (
                 <div className="modal-footer">
-                    <img src="https://s3-us-west-2.amazonaws.com/ascribe0/media/thumbnails/ascribe_animated_medium.gif" />
+                    <img src="img/ascribe_animated_medium.gif" />
                 </div>
             );
         }

js/components/piece_list.js

@@ -15,6 +15,8 @@ import Pagination from './ascribe_pagination/pagination';
 import PieceListBulkModal from './ascribe_piece_list_bulk_modal/piece_list_bulk_modal';
 import PieceListToolbar from './ascribe_piece_list_toolbar/piece_list_toolbar';
 
+import AppConstants from '../constants/application_constants';
+
 
 let PieceList = React.createClass({
     propTypes: {
@@ -62,10 +64,11 @@ let PieceList = React.createClass({
     render() {
         let currentPage = parseInt(this.props.query.page, 10) || 1;
         let totalPages = Math.ceil(this.state.pieceListCount / this.state.pageSize);
+        let loadingElement = (<img src={AppConstants.baseUrl + 'static/img/ascribe_animated_medium.gif'} />);
 
         return (
             <div>
-                <PieceListToolbar 
+                <PieceListToolbar
                     className="ascribe-piece-list-toolbar"
                     searchFor={this.searchFor} />
                 <PieceListBulkModal className="ascribe-piece-list-bulk-modal" />
@@ -77,7 +80,8 @@ let PieceList = React.createClass({
                     orderAsc={this.state.orderAsc}
                     search={this.state.search}
                     page={this.state.page}
-                    pageSize={this.state.pageSize}>
+                    pageSize={this.state.pageSize}
+                    loadingElement={loadingElement}>
                     {this.state.pieceList.map((item, i) => {
                         return (
                             <AccordionListItem

sass/ascribe_accordion_list.scss

@@ -39,6 +39,16 @@ $ascribe-accordion-list-font: 'Source Sans Pro';
     }
 }
 
+.ascribe-accordion-list-loading {
+    padding-top: 30%;
+    padding-bottom: 30%;
+}
+
+.ascribe-accordion-list-loading img {
+    display: block;
+    margin: auto;
+}
+
 .ascribe-accordion-list-item-table {
     text-align: center;
     margin-bottom: 3em;

server.js

@@ -9,6 +9,7 @@ var app = express();
 app.use(compression());
 
 app.use(baseUrl + 'static/js', express.static(__dirname + '/build/js'));
+app.use(baseUrl + 'static/img', express.static(__dirname + '/build/img'));
 app.use(baseUrl + 'static/css', express.static(__dirname + '/build/css'));
 app.use(baseUrl + 'static/fonts', express.static(__dirname + '/build/fonts'));
 app.use(baseUrl + 'static/thirdparty/', express.static(__dirname + '/node_modules'));