diff --git a/client/stylesheets/_extends.scss b/client/stylesheets/_extends.scss
deleted file mode 100644
index c136454..0000000
--- a/client/stylesheets/_extends.scss
+++ /dev/null
@@ -1,13 +0,0 @@
-%clearfix {
-  *zoom: 1;
-
-  &:before,
-  &:after {
-    display: table;
-    content: "";
-  }
-
-  &:after {
-    clear: both;
-  }
-}
diff --git a/client/stylesheets/application.scss b/client/stylesheets/application.scss
index a89b7d4..2902b5d 100644
--- a/client/stylesheets/application.scss
+++ b/client/stylesheets/application.scss
@@ -1,5 +1,4 @@
-@import "extends";
-
+@import "base/extends";
 @import "base/animations";
 @import "base/forms";
 
diff --git a/client/stylesheets/base/_extends.scss b/client/stylesheets/base/_extends.scss
new file mode 100644
index 0000000..c136454
--- /dev/null
+++ b/client/stylesheets/base/_extends.scss
@@ -0,0 +1,13 @@
+%clearfix {
+  *zoom: 1;
+
+  &:before,
+  &:after {
+    display: table;
+    content: "";
+  }
+
+  &:after {
+    clear: both;
+  }
+}
diff --git a/imports/ui/components/loading.js b/imports/ui/components/loading.js
new file mode 100644
index 0000000..ba75e0d
--- /dev/null
+++ b/imports/ui/components/loading.js
@@ -0,0 +1,28 @@
+import React from 'react';
+
+export const Loading = () => (
+  <svg
+    version="1.1"
+    className="loading"
+    xmlns="http://www.w3.org/2000/svg"
+    x="0px"
+    y="0px"
+    width="40px"
+    height="40px"
+    viewBox="0 0 40 40"
+    enable-background="new 0 0 40 40">
+      <path
+      opacity="1.0"
+      fill="#eee"
+      d="M20.201,5.169c-8.254,0-14.946,6.692-14.946,14.946c0,8.255,6.692,14.946,
+      14.946,14.946s14.946-6.691,14.946-14.946C35.146,11.861,28.455,5.169,20.201,
+      5.169z M20.201,31.749c-6.425,0-11.634-5.208-11.634-11.634c0-6.425,
+      5.209-11.634,11.634-11.634c6.425,0,11.633,5.209,11.633,11.634C31.834,
+      26.541,26.626,31.749,20.201,31.749z"/>
+      <path
+        fill="#da5347"
+        d="M26.013,10.047l1.654-2.866c-2.198-1.272-4.743-2.012-7.466-2.012h0v3.312h0
+      C22.32,8.481,24.301,9.057,26.013,10.047z">
+    </path>
+  </svg>
+);
diff --git a/imports/ui/containers/documents-list.js b/imports/ui/containers/documents-list.js
index 6c5674f..ea8a860 100644
--- a/imports/ui/containers/documents-list.js
+++ b/imports/ui/containers/documents-list.js
@@ -1,13 +1,16 @@
 import { composeWithTracker } from 'react-komposer';
 import { Documents } from '../../api/documents/documents.js';
 import { DocumentsList } from '../components/documents-list.js';
+import { Loading } from '../components/loading.js';
 
 const composer = (params, onReady) => {
   const subscription = Meteor.subscribe('documents');
   if (subscription.ready()) {
     const documents = Documents.find().fetch();
-    onReady(null, { documents });
+    // setTimeout is used to visually buffer the loading spinner so it's not
+    // jarring. Can just call onReady directly if you wish :)
+    setTimeout(() => { onReady(null, { documents }); }, 500);
   }
 };
 
-export default composeWithTracker(composer)(DocumentsList);
+export default composeWithTracker(composer, Loading)(DocumentsList);