show spinner on load for table & catalog components #1424

front/core/components/crud-model/crud-model.js

@@ -207,6 +207,8 @@ export default class CrudModel extends ModelProxy {
     sendRequest(filter, append) {
         this.cancelRequest();
         this.canceler = this.$q.defer();
+        this.isRefreshing = !append;
+        this.isPaging = append;
 
         let params = Object.assign(
             {filter},
@@ -220,7 +222,10 @@ export default class CrudModel extends ModelProxy {
         return this.$http.get(this._url, options).then(
             json => this.onRemoteDone(json, filter, append),
             json => this.onRemoteError(json)
-        );
+        ).finally(() => {
+            this.isRefreshing = false;
+            this.isPaging = false;
+        });
     }
 
     onRemoteDone(json, filter, append) {

front/core/components/model-proxy/model-proxy.js

@@ -321,6 +321,20 @@ export class Paginable {
         return false;
     }
 
+    /**
+     * @type {Boolean} Whether the model is refreshing.
+     */
+    get isRefreshing() {
+        return false;
+    }
+
+    /**
+     * @type {Boolean} Whether the model is paging.
+     */
+    get isPaging() {
+        return false;
+    }
+
     /**
      * @type {Boolean} Whether the data is paginated and there are more rows to load.
      */

front/core/components/table/index.html

@@ -1,8 +1,11 @@
 <div class="table">
-    <vn-empty-rows ng-if="$ctrl.model && !$ctrl.model.data" translate>
+    <vn-empty-rows ng-if="$ctrl.isRefreshing">
+        <vn-spinner enable="$ctrl.isRefreshing"></vn-spinner>
+    </vn-empty-rows>
+    <vn-empty-rows ng-if="!$ctrl.isRefreshing && $ctrl.model && !$ctrl.model.data" translate>
         Enter a new search
     </vn-empty-rows>
-    <vn-empty-rows ng-if="$ctrl.model.data.length === 0" translate>
+    <vn-empty-rows ng-if="!$ctrl.isRefreshing && $ctrl.model.data.length === 0" translate>
         No results
     </vn-empty-rows>
 </div>

front/core/components/table/index.js

@@ -14,6 +14,14 @@ export default class Table {
         });
     }
 
+    get isRefreshing() {
+        return (this.model && this.model.isRefreshing);
+    }
+
+    get isPaging() {
+        return (this.model && this.model.isPaging);
+    }
+
     setOrder(field, order) {
         this.field = field;
         this.order = order;

front/salix/styles/misc.scss

@@ -183,4 +183,11 @@ fieldset[disabled] .mdl-textfield .mdl-textfield__label,
             }
         }
     }
+}
+
+vn-empty-rows {
+    display: block;
+    text-align: center;
+    padding: 1.5em;
+    box-sizing: border-box;
 }

modules/order/front/catalog/index.html

@@ -39,13 +39,19 @@
             </vn-auto>
         </vn-horizontal>
     </vn-card>
-    <vn-card
-        ng-if="!model.data || model.data.length == 0"
-        style="text-align: center"
-        margin-medium-top
-        pad-medium>
-        <span translate>No results</span>
+
+    <vn-card margin-medium-top>
+        <vn-empty-rows ng-if="$ctrl.isRefreshing">
+            <vn-spinner enable="$ctrl.isRefreshing"></vn-spinner>
+        </vn-empty-rows>
+        <vn-empty-rows ng-if="!$ctrl.isRefreshing && !model.data" translate>
+            Enter a new search
+        </vn-empty-rows>
+        <vn-empty-rows ng-if="!$ctrl.isRefreshing && model.data.length === 0" translate>
+            No results
+        </vn-empty-rows>
     </vn-card>
+
     <vn-horizontal class="catalog-list">
         <section class="product" ng-repeat="item in items">
         <vn-card>

modules/order/front/catalog/index.js

@@ -128,6 +128,10 @@ class Controller {
         if (this.order && this.order.isConfirmed)
             this.$state.go('order.card.line');
     }
+
+    get isRefreshing() {
+        return this.$scope.model && this.$scope.model.isRefreshing;
+    }
 }
 
 Controller.$inject = ['$scope', '$state'];