Added loading component

.gitignore

@@ -102,3 +102,4 @@ archives/.idea/
 .env
 .vscode/
 .DS_Store
+dist

gulpfile.js

@@ -3,12 +3,16 @@ var browserify = require("browserify");
 var source = require('vinyl-source-stream');
 var tsify = require("tsify");
 
-gulp.task("default", ["css", "browserify"]);
+gulp.task("default", ["css", "img", "browserify"]);
 
 gulp.task("css", function () {
     return gulp.src('src/css/*').pipe(gulp.dest('dist/css'));
 })
 
+gulp.task("img", function () {
+  return gulp.src('src/img/*').pipe(gulp.dest('dist/img'));
+})
+
 gulp.task("browserify", function () {
     return browserify({
         basedir: '.',
@@ -26,4 +30,5 @@ gulp.task("browserify", function () {
 gulp.task("watch", function() {
     gulp.watch('src/**/*.{ts,tsx}', ['browserify']);
     gulp.watch('src/**/*.css', ['css']);
+    gulp.watch('src/img/*', ['img']);
 });

src/components/loading.tsx

@@ -0,0 +1,14 @@
+import * as React from 'react';
+
+export interface IAnnotationLoadingProps {}
+
+export default class Loading extends React.Component<IAnnotationLoadingProps, null> {
+
+    constructor () {
+        super();
+    }
+
+  render () {
+        return (<div className="loading">&nbsp;</div>)
+    }
+}

src/components/page-details.tsx

@@ -4,6 +4,7 @@ import {Link, RouteComponentProps} from 'react-router-dom';
 import WebMonitoringDb, {Annotation, Page, Version} from '../services/web-monitoring-db';
 import AnnotationForm from './annotation-form';
 import DiffView from './diff-view';
+import Loading from './loading'
 
 // export type IPageDetailsProps = RouteComponentProps<{pageId: string}>;
 export interface IPageDetailsProps extends RouteComponentProps<{pageId: string}> {
@@ -64,9 +65,8 @@ export default class PageDetails extends React.Component<IPageDetailsProps, IPag
 
         };
 
-        // TODO: should factor out a loading view
         if (!(this.state.page && this.state.version)) {
-            return <div>Loading…</div>;
+            return (<Loading />)
         }
 
         const page = this.state.page;

src/components/page-list.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import {Link, RouteComponentProps} from 'react-router-dom';
 import {Page} from '../services/web-monitoring-db';
+import Loading from './loading'
 
 // export type IPageListProps = RouteComponentProps<{}>;
 export interface IPageListProps extends RouteComponentProps<{}> {
@@ -14,7 +15,7 @@ export default class PageList extends React.Component<IPageListProps, null> {
 
     render () {
         if (!this.props.pages) {
-            return <div>Loading…</div>;
+            return (<Loading />)
         }
 
         return (

src/css/styles.css

@@ -204,3 +204,10 @@ ins {
 .login-form__footer {
     text-align: right;
 }
+
+.loading {
+  margin-left: 20px;
+  height: 70px;
+  background-image: url(../img/infinity-loader.svg);
+  background-repeat: no-repeat;
+}