From cf4a19e979d9728f07c5f51c60ab006adf964a7d Mon Sep 17 00:00:00 2001
From: Chris Hill-Scott <me@quis.cc>
Date: Thu, 16 Mar 2017 17:09:46 +0000
Subject: [PATCH] Add a loading indicator to the letter preview

Letter previews take a few seconds to load.

Good to let the user know that something is happening and that they
should wait.
---
 app/assets/stylesheets/components/letter.scss | 22 ++++++++++++++++++-
 1 file changed, 21 insertions(+), 1 deletion(-)

diff --git a/app/assets/stylesheets/components/letter.scss b/app/assets/stylesheets/components/letter.scss
index 979831cf8..62882c912 100644
--- a/app/assets/stylesheets/components/letter.scss
+++ b/app/assets/stylesheets/components/letter.scss
@@ -1,6 +1,11 @@
-
 $iso-paper-ratio: 141.42135624%;
 
+@keyframes ellipsis {
+  to {
+    width: 1.25em;
+  }
+}
+
 .letter {
 
   padding: 0;
@@ -8,6 +13,21 @@ $iso-paper-ratio: 141.42135624%;
   position: relative;
   background: $panel-colour;
 
+  &:before {
+    position: absolute;
+    top: 10%;
+    left: 50%;
+    margin-left: -0.5em;
+    font-size: 96px;
+    color: $white;
+    overflow: hidden;
+    display: block;
+    vertical-align: bottom;
+    animation: ellipsis steps(4,end) 1.3s infinite;
+    content: "\2026"; // ellipsis
+    width: 0px;
+  }
+
   a {
     display: block;
     overflow: hidden;