From d1e3f74c03149a9cd57de0c82cfa28a57c827cf0 Mon Sep 17 00:00:00 2001
From: Rob Harrington <oeoeaio@gmail.com>
Date: Thu, 9 Oct 2014 15:56:54 +1100
Subject: [PATCH] Add loading gif to image uploaders

---
 .../templates/registration/images/logo.html.haml          | 8 ++++++--
 .../templates/registration/images/promo.html.haml         | 8 ++++++--
 app/assets/stylesheets/darkswarm/registration.css.sass    | 8 +++++++-
 3 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/app/assets/javascripts/templates/registration/images/logo.html.haml b/app/assets/javascripts/templates/registration/images/logo.html.haml
index 803b103a58..4b19c14cff 100644
--- a/app/assets/javascripts/templates/registration/images/logo.html.haml
+++ b/app/assets/javascripts/templates/registration/images/logo.html.haml
@@ -36,6 +36,10 @@
       .row.pad-top
         .small-12.columns.center
           #image-placeholder.logo
-            %img{ ng: { show: "imageSrc()", src: '{{ imageSrc() }}' } }
-            .message{ ng: { hide: "imageSrc()" } }
+            %img{ ng: { show: "imageSrc() && !imageUploader.isUploading", src: '{{ imageSrc() }}' } }
+            .message{ ng: { hide: "imageSrc() || imageUploader.isUploading" } }
               Your logo will appear here for review once uploaded
+            .loading{ ng: { hide: "!imageUploader.isUploading" } }
+              %img.spinner{ src: "/assets/loading.gif" }
+              %br/
+              Uploading...
diff --git a/app/assets/javascripts/templates/registration/images/promo.html.haml b/app/assets/javascripts/templates/registration/images/promo.html.haml
index f134834d5c..d98721dc6d 100644
--- a/app/assets/javascripts/templates/registration/images/promo.html.haml
+++ b/app/assets/javascripts/templates/registration/images/promo.html.haml
@@ -34,6 +34,10 @@
       .row.pad-top
         .small-12.columns.center
           #image-placeholder.promo
-            %img{ ng: { show: "imageSrc()", src: '{{ imageSrc() }}' } }
-            .message{ ng: { hide: "imageSrc()" } }
+            %img{ ng: { show: "imageSrc() && !imageUploader.isUploading", src: '{{ imageSrc() }}' } }
+            .message{ ng: { hide: "imageSrc() || imageUploader.isUploading" } }
               Your logo will appear here for review once uploaded
+            .loading{ ng: { hide: "!imageUploader.isUploading" } }
+              %img.spinner{ src: "/assets/loading.gif" }
+              %br/
+              Uploading...
diff --git a/app/assets/stylesheets/darkswarm/registration.css.sass b/app/assets/stylesheets/darkswarm/registration.css.sass
index 547f834406..707d5a93e7 100644
--- a/app/assets/stylesheets/darkswarm/registration.css.sass
+++ b/app/assets/stylesheets/darkswarm/registration.css.sass
@@ -92,19 +92,25 @@
     font-size: 18px
     font-weight: bold
     color: #373737
-    background-color: #e1e1e1
+    background-color: #f1f1f1
     text-align: center
     border: 3px dashed #494949
     margin-left: auto
     margin-right: auto
+    .spinner
+      width: 100px
     &.logo
       .message
         padding-top: 6em
+      .loading
+        padding-top: 4em
       width:  306px
       height: 306px
     &.promo
       .message
         padding-top: 4em
+      .loading
+        padding-top: 1em
       width:  726px
       height: 166px