Add spinner before loading an email or draft

related with #657
with @tuliocasagrande

10 files changed, 138 insertions, 4 deletions

diff --git a/web-ui/app/js/dispatchers/right_pane_dispatcher.js b/web-ui/app/js/dispatchers/right_pane_dispatcher.js
index 870bcd92..37b65920 100644
--- a/web-ui/app/js/dispatchers/right_pane_dispatcher.js
+++ b/web-ui/app/js/dispatchers/right_pane_dispatcher.js
@@ -24,10 +24,11 @@ define(
     'mail_view/ui/draft_box',
     'mail_view/ui/no_message_selected_pane',
     'mail_view/ui/feedback_box',
+    'mail_view/ui/spinner',
     'page/events'
   ],
 
-  function(defineComponent, ComposeBox, MailView, ReplySection, DraftBox, NoMessageSelectedPane, FeedbackBox, events) {
+  function(defineComponent, ComposeBox, MailView, ReplySection, DraftBox, NoMessageSelectedPane, FeedbackBox, Spinner, events) {
     'use strict';
 
     return defineComponent(rightPaneDispatcher);
@@ -67,8 +68,13 @@ define(
         FeedbackBox.attachTo(stage);
       };
 
+      this.addSpinner = function(stage) {
+        Spinner.attachTo(stage);
+      };
+
       this.openMail = function(ev, data) {
         var stage = this.reset(this.attr.mailView);
+        this.addSpinner(stage);
         MailView.attachTo(stage, data);
 
         var replySectionContainer = this.createAndAttach(this.attr.replySection);
@@ -89,6 +95,7 @@ define(
 
       this.openDraft = function (ev, data) {
         var stage = this.reset(this.attr.draftBox);
+        this.addSpinner(stage);
         DraftBox.attachTo(stage, { mailIdent: data.ident, currentTag: this.attr.currentTag });
       };
 
diff --git a/web-ui/app/js/mail_view/ui/spinner.js b/web-ui/app/js/mail_view/ui/spinner.js
new file mode 100644
index 00000000..53a24011
--- /dev/null
+++ b/web-ui/app/js/mail_view/ui/spinner.js
@@ -0,0 +1,38 @@
+/*
+ * Copyright (c) 2017 ThoughtWorks, Inc.
+ *
+ * Pixelated is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * Pixelated is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with Pixelated. If not, see <http://www.gnu.org/licenses/>.
+ */
+define(
+  [
+    'flight/lib/component',
+    'views/templates'
+  ],
+
+  function(defineComponent, templates) {
+    'use strict';
+
+    return defineComponent(spinner);
+
+    function spinner() {
+      this.render = function () {
+        this.$node.html(templates.mails.spinner());
+      };
+
+      this.after('initialize', function () {
+        this.render();
+      });
+    }
+  }
+);
diff --git a/web-ui/app/js/views/templates.js b/web-ui/app/js/views/templates.js
index d983c911..05ecbbdd 100644
--- a/web-ui/app/js/views/templates.js
+++ b/web-ui/app/js/views/templates.js
@@ -47,7 +47,8 @@ define(['hbs/templates'], function (templates) {
       mailActions: window.Pixelated['app/templates/mails/mail_actions.hbs'],
       draft: window.Pixelated['app/templates/mails/draft.hbs'],
       sent: window.Pixelated['app/templates/mails/sent.hbs'],
-      trash: window.Pixelated['app/templates/mails/trash.hbs']
+      trash: window.Pixelated['app/templates/mails/trash.hbs'],
+      spinner: window.Pixelated['app/templates/mails/spinner.hbs']
     },
     mailActions: {
       actionsBox: window.Pixelated['app/templates/mail_actions/actions_box.hbs'],
diff --git a/web-ui/app/scss/base/_colors.scss b/web-ui/app/scss/base/_colors.scss
index 17333ff9..f3c245a9 100644
--- a/web-ui/app/scss/base/_colors.scss
+++ b/web-ui/app/scss/base/_colors.scss
@@ -5,6 +5,7 @@ $lighter_blue: #91C2D1;
 $light_blue: #3DABC4;
 $dark_blue: #178CA6;
 $bullet-blue: #5cacde;
+$middle_blue: #83EAEA;
 $light_orange: #FF9C00;
 $dark_orange: #FF7902;
 
diff --git a/web-ui/app/scss/style.scss b/web-ui/app/scss/style.scss
index e99ab194..215d28f1 100644
--- a/web-ui/app/scss/style.scss
+++ b/web-ui/app/scss/style.scss
@@ -33,7 +33,7 @@
 @import "views/mail-list";
 @import "views/_action-bar.scss";
 @import "views/_navigation.scss";
+@import "views/_spinner.scss";
 
 // misc stuff
 @import "others";
-
diff --git a/web-ui/app/scss/views/_spinner.scss b/web-ui/app/scss/views/_spinner.scss
new file mode 100644
index 00000000..1f8fb099
--- /dev/null
+++ b/web-ui/app/scss/views/_spinner.scss
@@ -0,0 +1,44 @@
+$offset: 187;
+$duration: 1.4s;
+
+#spinner-section {
+  margin: auto;
+  width: 35px;
+  margin-top: 40%;
+}
+
+#spinner {
+  animation: rotator $duration linear infinite;
+}
+
+@keyframes rotator {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(270deg); }
+}
+
+#spinner-path {
+  stroke-dasharray: $offset;
+  stroke-dashoffset: 0;
+  transform-origin: center;
+  animation:
+    dash $duration ease-in-out infinite,
+    colors ($duration*4) ease-in-out infinite;
+}
+
+@keyframes colors {
+	0% { stroke: $dark_blue; }
+	50% { stroke: $middle_blue; }
+  100% { stroke: $dark_blue; }
+}
+
+@keyframes dash {
+ 0% { stroke-dashoffset: $offset; }
+ 50% {
+   stroke-dashoffset: $offset/4;
+   transform:rotate(135deg);
+ }
+ 100% {
+   stroke-dashoffset: $offset;
+   transform:rotate(450deg);
+ }
+}
diff --git a/web-ui/app/templates/mails/spinner.hbs b/web-ui/app/templates/mails/spinner.hbs
new file mode 100644
index 00000000..78027c56
--- /dev/null
+++ b/web-ui/app/templates/mails/spinner.hbs
@@ -0,0 +1,5 @@
+<div id="spinner-section">
+  <svg id="spinner" width="35px" height="35px" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
+     <circle id="spinner-path" fill="none" stroke-width="6" stroke-linecap="round" cx="33" cy="33" r="30"></circle>
+  </svg>
+</div>
diff --git a/web-ui/test/spec/dispatchers/right_pane_dispatcher.spec.js b/web-ui/test/spec/dispatchers/right_pane_dispatcher.spec.js
index 9df1d557..bc634a4e 100644
--- a/web-ui/test/spec/dispatchers/right_pane_dispatcher.spec.js
+++ b/web-ui/test/spec/dispatchers/right_pane_dispatcher.spec.js
@@ -94,4 +94,32 @@ describeComponent('dispatchers/right_pane_dispatcher', function () {
     });
   });
 
+  describe('on message selected', function () {
+    beforeEach(function () {
+      this.setupComponent();
+    });
+
+    it('addSpinner renders the spinner to the page', function () {
+      var spinner = require('mail_view/ui/spinner');
+      spyOn(spinner, 'attachTo');
+      var stage = {stage: 'mail-view'};
+      this.component.addSpinner(stage);
+
+      expect(spinner.attachTo).toHaveBeenCalledWith(stage);
+    });
+
+    it('should show the spinner when opening a mail message', function () {
+      spyOn(this.component, 'addSpinner');
+      this.component.trigger(document, Pixelated.events.ui.mail.open, { ident: '1' });
+
+      expect(this.component.addSpinner).toHaveBeenCalled();
+    });
+
+    it('should show the spinner when opening a draft message', function () {
+      spyOn(this.component, 'addSpinner');
+      this.component.trigger(document, Pixelated.events.dispatchers.rightPane.openDraft, { ident: '1' });
+
+      expect(this.component.addSpinner).toHaveBeenCalled();
+    });
+  });
 });
diff --git a/web-ui/test/spec/mail_view/ui/spinner.spec.js b/web-ui/test/spec/mail_view/ui/spinner.spec.js
new file mode 100644
index 00000000..71e4d4a4
--- /dev/null
+++ b/web-ui/test/spec/mail_view/ui/spinner.spec.js
@@ -0,0 +1,11 @@
+describeComponent('mail_view/ui/spinner', function () {
+  'use strict';
+
+  describe('spinner on initialization', function () {
+
+    it('should render the spinner svg', function () {
+      this.setupComponent();
+      expect(this.$node.html()).toMatch('<svg id="spinner"');
+    });
+  });
+});
diff --git a/web-ui/test/spec/page/pix_logo.spec.js b/web-ui/test/spec/page/pix_logo.spec.js
index 1700e77d..7363392d 100644
--- a/web-ui/test/spec/page/pix_logo.spec.js
+++ b/web-ui/test/spec/page/pix_logo.spec.js
@@ -90,4 +90,3 @@ describeComponent('page/pix_logo', function () {
     });
   });
 });
-