diff --git a/.gitignore b/.gitignore
index a57ffad4..dbc97c3c 100644
--- a/.gitignore
+++ b/.gitignore
@@ -102,3 +102,4 @@ archives/.idea/
 .env
 .vscode/
 .DS_Store
+dist
diff --git a/gulpfile.js b/gulpfile.js
index 195e72a2..e7e2d563 100644
--- a/gulpfile.js
+++ b/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']);
 });
diff --git a/src/components/loading.tsx b/src/components/loading.tsx
new file mode 100644
index 00000000..7198b05f
--- /dev/null
+++ b/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>)
+    }
+}
diff --git a/src/components/page-details.tsx b/src/components/page-details.tsx
index b056a1dc..6797c88e 100644
--- a/src/components/page-details.tsx
+++ b/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;
diff --git a/src/components/page-list.tsx b/src/components/page-list.tsx
index a0bca88c..b1afa8b1 100644
--- a/src/components/page-list.tsx
+++ b/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 (
diff --git a/src/css/styles.css b/src/css/styles.css
index b55d6acd..bdc27fcc 100644
--- a/src/css/styles.css
+++ b/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;
+}
diff --git a/src/img/infinity-loader.svg b/src/img/infinity-loader.svg
new file mode 100644
index 00000000..29a652f6
--- /dev/null
+++ b/src/img/infinity-loader.svg
@@ -0,0 +1,5 @@
+<svg width="74px"  height="74px"  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" class="lds-infinity">
+    <path fill="none" ng-attr-stroke="{{config.stroke}}" ng-attr-stroke-width="{{config.width}}" ng-attr-stroke-dasharray="{{config.dasharray}}" d="M24.3,30C11.4,30,5,43.3,5,50s6.4,20,19.3,20c19.3,0,32.1-40,51.4-40 C88.6,30,95,43.3,95,50s-6.4,20-19.3,20C56.4,70,43.6,30,24.3,30z" stroke="#ff7c81" stroke-width="7" stroke-dasharray="159.08513549804687 97.50379272460938">
+      <animate attributeName="stroke-dashoffset" calcMode="linear" values="0;256.58892822265625" keyTimes="0;1" dur="1" begin="0s" repeatCount="indefinite"></animate>
+    </path>
+  </svg>
\ No newline at end of file