Merge pull request #108 from lazywithclass/adding-loading-component

Adding loading component
edgi-govdata-archiving · Aug 20, 2017 · 18fd340 · 18fd340
2 parents 8d23835 + fd327cf
commit 18fd340
Show file tree

Hide file tree

Showing 8 changed files with 48 additions and 34 deletions.
diff --git a/.gitignore b/.gitignore
@@ -102,3 +102,4 @@ archives/.idea/
 .env
 .vscode/
 .DS_Store
+dist
diff --git a/gulpfile.js b/gulpfile.js
@@ -9,6 +9,12 @@ gulp.task('css', function () {
   return gulp.src('src/css/*').pipe(gulp.dest('dist/css'));
 });
 
+gulp.task("default", ["css", "img", "browserify"]);
+
+gulp.task("img", function () {
+  return gulp.src('src/img/*').pipe(gulp.dest('dist/img'));
+});
+
 gulp.task('browserify', function () {
   return browserify({
     basedir: '.',
@@ -27,4 +33,5 @@ gulp.task('browserify', function () {
 gulp.task('watch', function() {
   gulp.watch('src/**/*.{js,jsx}', ['browserify']);
   gulp.watch('src/**/*.css', ['css']);
+  gulp.watch('src/img/*', ['img']);
 });
diff --git a/src/components/loading.jsx b/src/components/loading.jsx
@@ -0,0 +1,12 @@
+import React from 'react';
+
+export default class Loading extends React.Component {
+
+  constructor () {
+    super();
+  }
+
+  render () {
+    return (<div className="loading">&nbsp;</div>)
+  }
+}
diff --git a/src/components/page-details.jsx b/src/components/page-details.jsx
@@ -3,6 +3,7 @@ import React from 'react';
 import {Link, Redirect} from 'react-router-dom';
 import WebMonitoringDb from '../services/web-monitoring-db';
 import ChangeView from './change-view';
+import Loading from './loading'
 
 /**
  * @typedef {Object} PageDetailsProps
@@ -70,9 +71,8 @@ export default class PageDetails extends React.Component {
   }
 
   render () {
-    // TODO: should factor out a loading view
     if (!(this.state.page)) {
-      return <div>Loading…</div>;
+      return (<Loading />);
     }
 
     const page = this.state.page;

diff --git a/src/components/page-list.jsx b/src/components/page-list.jsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import Loading from './loading'
 
 /**
  * These props also inherit from React Router's RouteComponent props
@@ -16,7 +17,7 @@ import React from 'react';
 export default class PageList extends React.Component {
   render () {
     if (!this.props.pages) {
-      return <div>Loading…</div>;
+      return (<Loading />);
     }
 
     return (

diff --git a/src/css/styles.css b/src/css/styles.css
@@ -297,30 +297,21 @@ iframe {
     width: 100%;
 }
 
-/* ===== Progress Bar ===== */
-.progress {
-    width: 100%;
-}
-
-.progress .progress-bar.active {
-    font-weight: 700;
-    animation: progress-bar-stripes .5s linear infinite;
-}
-
+/* ===== Progress bar ===== */
 .dotdotdot:after {
-    font-weight: 300;
-    content: '...';
-    display: inline-block;
-    width: 20px;
-    text-align: left;
-    animation: dotdotdot 1.5s linear infinite;
+  font-weight: 300;
+  content: '...';
+  display: inline-block;
+  width: 20px;
+  text-align: left;
+  animation: dotdotdot 1.5s linear infinite;
 }
 
 @keyframes dotdotdot {
-    0%   { content: '...'; }
-    25% { content: ''; }
-    50% { content: '.'; }
-    75% { content: '..'; }
+  0%   { content: '...'; }
+  25% { content: ''; }
+  50% { content: '.'; }
+  75% { content: '..'; }
 }
 
 /* ===== Login Form ===== */
@@ -345,3 +336,10 @@ iframe {
 .login-form__footer {
     text-align: right;
 }
+
+.loading {
+  background-position-x: center;
+  height: 70px;
+  background-image: url(../img/infinity-loader.svg);
+  background-repeat: no-repeat;
+}
diff --git a/src/img/infinity-loader.svg b/src/img/infinity-loader.svg
diff --git a/views/main.html b/views/main.html
@@ -18,17 +18,7 @@
         <script src="https://use.fontawesome.com/2155f7b139.js"></script>
     </head>
     <body id="bootstrap-override">
-        <div id="web-monitoring-ui-root">
-            <div class="row">
-                <div class="col-md-12">
-                    <div class="progress active progress-striped">
-                        <div class="progress-bar progress-success" style="width:100%" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="100">
-                            <span>Please wait<span class="dotdotdot"></span></span>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
+        <div id="web-monitoring-ui-root"></div>
 
         <script type="text/javascript" src="/bundle.js"></script>
     </body>
-Original file line number
+Diff line change
@@ Expand Up / @@ -102,3 +102,4 @@ archives/.idea/ @@
     .env
     .vscode/
     .DS_Store
+    dist