Implement lazy updating of components

Author: jissereitsma

view/base/templates/script/ajax-queue.phtml

@@ -32,6 +32,10 @@ if ($interval < 10) {
                 component,
                 update,
             });
+
+            if (component.lazyUpdate) {
+
+            }
         },
         run() {
             setInterval(async () => {
@@ -44,6 +48,15 @@ if ($interval < 10) {
             }
 
             const requests = this.requests;
+            const hasNonLazyUpdate = requests.some(request => request.component.lazyUpdate === false);
+            if (false === hasNonLazyUpdate) {
+                return;
+            }
+
+            requests.forEach(request => {
+                request.component.beforePost();
+            });
+
             this.requests = [];
 
             await fetch('<?= $escaper->escapeUrl($componentUtil->getPostUrl(

view/base/templates/script/component-type/base-component-type.phtml

@@ -59,15 +59,16 @@ $componentUtil = $viewModelFactory->create(ComponentUtil::class);
                 value = this.value;
             }
 
+            return LokiAjaxQueue.add(this, value);
+        },
+        beforePost() {
             this.loading = true;
             this.setTargetStateOnPost();
             this.beforePostValue = this.value;
 
             this.showLoaderTimerId = setTimeout(() => {
                 this.showLoader = true;
             }, this.showLoaderTimeout);
-
-            return LokiAjaxQueue.add(this, value);
         },
         afterPostSuccess() {
             if (!this.valid) {