Adding lazy loading to collapsed panels.

Author: travist

src/components/panel/Panel.js

@@ -14,7 +14,8 @@ export default class PanelComponent extends NestedComponent {
       input: false,
       tableView: false,
       dataGridLabel: false,
-      persistent: false
+      persistent: false,
+      lazyLoad: false
     }, ...extend);
   }
 
@@ -31,6 +32,7 @@ export default class PanelComponent extends NestedComponent {
 
   constructor(component, options, data) {
     super(component, options, data);
+    this.lazyLoaded = false;
   }
 
   get defaultSchema() {
@@ -60,6 +62,48 @@ export default class PanelComponent extends NestedComponent {
     }
   }
 
+  checkValidity(data, dirty) {
+    // Make sure to toggle the collapsed state before checking validity.
+    if (
+      dirty &&
+      this.component.lazyLoad &&
+      this.component.collapsible &&
+      this.collapsed &&
+      !this.lazyLoaded
+    ) {
+      this.lazyLoaded = true;
+      this.addComponents();
+    }
+
+    return super.checkValidity(data, dirty);
+  }
+
+  addComponents(element, data, options, state) {
+    // If they are lazy loading, then only add the components if they toggle the collapsed state.
+    if (
+      this.component.lazyLoad &&
+      this.component.collapsible &&
+      this.collapsed &&
+      !this.lazyLoaded
+    ) {
+      return;
+    }
+    return super.addComponents(element, data, options, state);
+  }
+
+  toggleCollapse() {
+    super.toggleCollapse();
+    if (
+      this.component.lazyLoad &&
+      this.component.collapsible &&
+      !this.collapsed &&
+      !this.lazyLoaded
+    ) {
+      this.lazyLoaded = true;
+      this.addComponents();
+    }
+  }
+
   build(state) {
     this.component.theme = this.component.theme || 'default';
     let panelClass = 'mb-2 card border ';

src/components/panel/editForm/Panel.edit.display.js

@@ -119,5 +119,16 @@ export default [
     conditional: {
       json: { '===': [{ var: 'data.collapsible' }, true] }
     }
+  },
+  {
+    weight: 652,
+    type: 'checkbox',
+    label: 'Lazy Load Contents',
+    tooltip: 'Lazy loads the contents only when the panel is opened.',
+    key: 'lazyLoad',
+    input: true,
+    conditional: {
+      json: { '===': [{ var: 'data.collapsed' }, true] }
+    }
   }
 ];