[Improvement][MOD-178] Disable the modify decision button until submi…

…ssion related actions are loaded (#90) * Disable button until related actions is loaded * update loading label * Add padding to icon * Separate class for button loading indicator * Apply requested changes
CenterForOpenScience · Nov 8, 2017 · ad1447a · ad1447a
1 parent 1d150ff
commit ad1447a
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 2 deletions.
diff --git a/app/components/preprint-status-banner/style.scss b/app/components/preprint-status-banner/style.scss
@@ -64,6 +64,9 @@
     .reviewer-feedback {
       padding-right: 15px;
 
+      .button-loading-indicator {
+        margin-right: 8px;
+      }
       .dropdown-menu {
         font-size:62.5%;
         background-color: $color-bg-gray-lighter;

diff --git a/app/components/preprint-status-banner/template.hbs b/app/components/preprint-status-banner/template.hbs
@@ -22,8 +22,13 @@
         </div>
         <div class="dropdown reviewer-feedback">
             {{#bs-dropdown closeOnMenuClick=false as |dd|}}
-                {{#dd.button type="success"}}
-                    {{t labelDecisionDropdown}} <i class="fa fa-caret-down" aria-hidden="true"></i>
+                {{#dd.button type="success" disabled=submission.actions.isPending}}
+                    {{#if submission.actions.isPending}}
+                        <i class='button-loading-indicator fa fa-circle-o-notch fa-spin'></i>
+                        {{t 'components.preprint-status-banner.loading'}}
+                    {{else}}
+                        {{t labelDecisionDropdown}} <i class="fa fa-caret-down" aria-hidden="true"></i>
+                    {{/if}}
                 {{/dd.button}}
                 {{#dd.menu}}
                     <div class="feedback-header">

diff --git a/app/locales/en/translations.js b/app/locales/en/translations.js
@@ -246,6 +246,7 @@ export default {
             pending: 'pending',
             accepted: 'accepted',
             rejected: 'rejected',
+            loading: 'Loading...',
             decision: {
                 make_decision: 'Make decision',
                 modify_decision: 'Modify decision',