Merge pull request #1414 from bolt/feature/adding-spinners-on-certain…

…-buttons Adding spinners and disabling buttons to indicate the user might have to wait a few seconds
bolt · May 31, 2020 · abef7b3 · abef7b3
2 parents 08ce81a + bcd9f17
commit abef7b3
Show file tree

Hide file tree

Showing 8 changed files with 46 additions and 5 deletions.
diff --git a/assets/js/app/editor/Components/File.vue b/assets/js/app/editor/Components/File.vue
@@ -64,6 +64,7 @@
                 class="btn dropdown-item"
                 type="button"
                 :readonly="readonly"
+                data-patience="virtue"
                 @click="selectServerFile"
               >
                 <i class="fas fa-fw fa-th"></i>
@@ -77,6 +78,9 @@
               >
                 <i class="fas fa-fw fa-info-circle"></i>
                 {{ labels.button_edit_attributes }}
+                <small class="dim"
+                  ><i class="fas fa-external-link-square-alt"></i
+                ></small>
               </a>
             </div>
           </div>
@@ -223,9 +227,11 @@ export default {
             },
           });
           window.$('.bootbox-input').attr('name', 'bootbox-input');
+          window.reEnablePatientButtons();
         })
         .catch(err => {
           console.warn(err);
+          window.reEnablePatientButtons();
         });
     },
     onDragEnter(e) {

diff --git a/assets/js/app/editor/Components/Image.vue b/assets/js/app/editor/Components/Image.vue
@@ -63,6 +63,7 @@
                 class="btn dropdown-item"
                 type="button"
                 :disabled="readonly"
+                data-patience="virtue"
                 @click="selectServerFile"
               >
                 <i class="fas fa-fw fa-th"></i>
@@ -76,6 +77,9 @@
               >
                 <i class="fas fa-fw fa-info-circle"></i>
                 {{ labels.button_edit_attributes }}
+                <small class="dim"
+                  ><i class="fas fa-external-link-square-alt"></i
+                ></small>
               </a>
             </div>
           </div>
@@ -263,9 +267,11 @@ export default {
             },
           });
           window.$('.bootbox-input').attr('name', 'bootbox-input');
+          window.reEnablePatientButtons();
         })
         .catch(err => {
           console.warn(err);
+          window.reEnablePatientButtons();
         });
     },
     onDragEnter(e) {

diff --git a/assets/js/app/index.js b/assets/js/app/index.js
@@ -5,4 +5,5 @@ import './listing';
 import './editor';
 import './login';
 import './confirmation.js';
+import './patience-is-a-virtue.js';
 import './common.js';
diff --git a/assets/js/app/listing/Components/Table/Row/_Actions.vue b/assets/js/app/listing/Components/Table/Row/_Actions.vue
@@ -4,6 +4,7 @@
       <a
         class="btn btn-secondary btn-block btn-sm text-nowrap"
         :href="record.extras.editLink"
+        data-patience="virtue"
       >
         <i class="far fa-edit mr-1"></i> {{ labels.button_edit }}
       </a>

diff --git a/assets/js/app/patience-is-a-virtue.js b/assets/js/app/patience-is-a-virtue.js
@@ -0,0 +1,27 @@
+import $ from 'jquery';
+
+$('*[data-patience]').on('click', function() {
+  const thisElement = $(this);
+  const thisIcon = thisElement.find('i');
+
+  // Bootstrap padding / margin like `mx-2` or `pt-3`
+  const addedPadding = thisIcon.attr('class').match(/[mp][tblrxy]-[0-5]/i);
+  const newClass =
+    'fas fa-w fa-cog fa-spin ' + (addedPadding ? addedPadding : '');
+
+  $(this).attr('data-original-class', thisIcon.attr('class'));
+  thisIcon.attr('class', newClass);
+
+  window.setTimeout(function() {
+    thisElement.attr('disabled', true);
+  }, 50);
+});
+
+window.reEnablePatientButtons = function() {
+  $('*[data-patience]').each(function() {
+    const thisIcon = $(this).find('i');
+
+    $(this).attr('disabled', false);
+    thisIcon.attr('class', $(this).attr('data-original-class'));
+  });
+};
diff --git a/assets/js/app/sidebar/Components/Menu/_SubMenu.vue b/assets/js/app/sidebar/Components/Menu/_SubMenu.vue
@@ -1,11 +1,11 @@
 <template>
   <ul class="link--menu">
     <li v-if="item.link_new !== null" class="link--actions">
-      <a :href="item.link_new">
+      <a :href="item.link_new" data-patience="virtue">
         <i class="fas fa-fw fa-magic mr-2"></i
         ><span>New {{ item.singular_name }}</span>
       </a>
-      <a :href="item.link_listing">
+      <a :href="item.link_listing" data-patience="virtue">
         <i class="fas fa-fw" :class="item.icon"></i>
         <span>View {{ item.name }}</span>
       </a>
@@ -17,7 +17,7 @@
       :key="index"
     >
       <!-- eslint-enable -->
-      <a :href="subitem.editLink">
+      <a :href="subitem.editLink" data-patience="virtue">
         <i class="fas fa-fw mr-2" :class="subitem.icon"></i>
         <!-- eslint-disable-next-line vue/no-v-html -->
         <span v-if="subitem.name" v-html="subitem.name"></span>

diff --git a/templates/content/_buttons.html.twig b/templates/content/_buttons.html.twig
@@ -2,7 +2,7 @@
 
 <div class="record-actions">
 
-    {{ macro.button('action.save', 'fa-save', 'success', {'type': 'submit', 'form': 'editcontent'}) }}
+    {{ macro.button('action.save', 'fa-save', 'success', {'type': 'submit', 'form': 'editcontent', 'data-patience': 'virtue'}) }}
 
     {% if record.id %}
         <div class="btn-group">

diff --git a/templates/content/listing.html.twig b/templates/content/listing.html.twig
@@ -52,7 +52,7 @@
         </div>
         <div class="card-body">
             <p>
-                <a class="btn btn-primary" href="{{ path('bolt_content_new', { contentType: contentType.slug }) }}">
+                <a class="btn btn-primary" href="{{ path('bolt_content_new', { contentType: contentType.slug }) }}" data-patience="virtue">
                     {{ macro.icon('magic') }} {{ __('action.create_new') }} {{ contentType.singular_name }}
                 </a>
             </p>