Better spinner style

Author: brandonkelly

src/assets/edit/dist/css/edit-webhook.css

@@ -3,6 +3,10 @@
     display: inline-block;
 }
 
+#filter-pane {
+    position: relative;
+}
+
 #no-filters {
     margin: 0;
 }
@@ -41,3 +45,16 @@
 #filters .filter-ignore .status {
     margin: 0;
 }
+
+#filter-spinner {
+    position: absolute;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(255,255,255,0.85);
+    z-index: 1;
+}

src/assets/edit/dist/js/EditWebhook.js

@@ -64,8 +64,6 @@
                     return;
                 }
                 this.$filterSpinner.removeClass('hidden');
-                this.$noFiltersMessage.addClass('hidden');
-                this.$filtersTable.addClass('hidden');
                 Craft.postActionRequest('webhooks/webhooks/filters', {
                     senderClass: this.classVal,
                     event: this.eventVal,
@@ -74,12 +72,14 @@
                     if (textStatus === 'success') {
                         this.resetFilters();
                         if (response.filters.length) {
+                            this.$noFiltersMessage.addClass('hidden');
                             this.$filtersTable.removeClass('hidden');
                             for (var i = 0; i < response.filters.length; i++) {
                                 this.filters[response.filters[i]].$tr.removeClass('hidden');
                             }
                         } else {
                             this.$noFiltersMessage.removeClass('hidden');
+                            this.$filtersTable.addClass('hidden');
                         }
                     }
                 }.bind(this));

src/templates/_manage/edit.html

@@ -73,7 +73,6 @@
 
     {% set filtersInput %}
         <div class="pane" id="filter-pane">
-            <div class="spinner hidden" id="filter-spinner"></div>
             <p id="no-filters"{% if webhook.filters is not empty %} class="hidden"{% endif %}>{{ 'No filters match this event.'|t('webhooks') }}</p>
             <table id="filters" class="data{% if webhook.filters is empty %} hidden{% endif %}">
                 {% for filter in allFilters %}
@@ -90,6 +89,7 @@
                     </tr>
                 {% endfor %}
             </table>
+            <div id="filter-spinner" class="hidden"><div class="spinner"></div></div>
         </div>
     {% endset %}
     {{ forms.field({