Add spinner before loading an email or draft

related with #657
with @tuliocasagrande

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 });
       };
 

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();
+      });
+    }
+  }
+);

web-ui/app/js/page/events.js

@@ -64,7 +64,9 @@ define(function () {
         unchecked: 'ui:mail:unchecked',
         changedSinceLastSave: 'ui:mail:changedSinceLastSave',
         send: 'ui:mail:send',
-        recipientsUpdated: 'ui:mail:recipientsUpdated'
+        recipientsUpdated: 'ui:mail:recipientsUpdated',
+        startSpinner: 'ui:mail:startSpinner',
+        stopSpinner: 'ui:mail:stopSpinner'
       },
       page: {
         previous: 'ui:page:previous',

web-ui/app/js/page/pix_logo.js

@@ -55,7 +55,7 @@ define(
         this.on(document, events.ui.mail.open, this.triggerSpinLogo);
         this.on(document, events.dispatchers.rightPane.openDraft, this.triggerSpinLogo);
         this.on(document, events.search.perform, this.triggerSpinLogo);
-        this.on(document, events.mail.want, this.triggerStopSpinningLogo);
+        this.on(document, events.mail.display, this.triggerStopSpinningLogo);
       });
     }
   }

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'],

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;
 

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";
-

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); }
+}
+
+.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);
+ }
+}

web-ui/app/templates/mails/spinner.hbs

@@ -0,0 +1,5 @@
+<div class="spinner-section">
+  <svg id="spinner" width="35px" height="35px" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
+     <circle class="path" fill="none" stroke-width="6" stroke-linecap="round" cx="33" cy="33" r="30"></circle>
+  </svg>
+</div>

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();
+    });
+  });
 });

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"');
+    });
+  });
+});

web-ui/test/spec/page/pix_logo.spec.js

@@ -69,7 +69,7 @@ describeComponent('page/pix_logo', function () {
     it('should stop spinning after mail message is loaded', function (done) {
       this.setupComponent('<polygon id="clock1" class="logo-part-animation-on"></polygon>');
       var eventSpy = spyOnEvent(document, Pixelated.events.ui.page.stopSpinningLogo);
-      $(document).trigger(Pixelated.events.mail.want);
+      $(document).trigger(Pixelated.events.mail.display);
 
       var component = this.component;