web: fix ModalForm loading data even when not in viewport

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>

web/src/elements/forms/Form.ts

@@ -45,6 +45,11 @@ export class Form<T> extends LitElement {
         `];
     }
 
+    get isInViewport(): boolean {
+        const rect = this.getBoundingClientRect();
+        return !(rect.x + rect.y + rect.width + rect.height === 0);
+    }
+
     getSuccessMessage(): string {
         return this.successMessage;
     }
@@ -214,8 +219,7 @@ export class Form<T> extends LitElement {
     }
 
     render(): TemplateResult {
-        const rect = this.getBoundingClientRect();
-        if (rect.x + rect.y + rect.width + rect.height === 0) {
+        if (!this.isInViewport) {
             return html``;
         }
         return this.renderVisible();

web/src/elements/forms/ModelForm.ts

@@ -1,4 +1,4 @@
-import { property } from "lit-element";
+import { property, TemplateResult } from "lit-element";
 import { EVENT_REFRESH } from "../../constants";
 import { Form } from "./Form";
 
@@ -9,13 +9,17 @@ export abstract class ModelForm<T, PKT extends string | number> extends Form<T>
     @property({attribute: false})
     set instancePk(value: PKT) {
         this._instancePk = value;
-        this.loadInstance(value).then(instance => {
-            this.instance = instance;
-        });
+        if (this.isInViewport) {
+            this.loadInstance(value).then(instance => {
+                this.instance = instance;
+            });
+        }
     }
 
     private _instancePk?: PKT;
 
+    private _initialLoad = false;
+
     @property({ attribute: false })
     instance?: T = this.defaultInstance;
 
@@ -33,4 +37,13 @@ export abstract class ModelForm<T, PKT extends string | number> extends Form<T>
         });
     }
 
+    render(): TemplateResult {
+        // if we're in viewport now and haven't loaded AND have a PK set, load now
+        if (this.isInViewport && !this._initialLoad && this._instancePk) {
+            this.instancePk = this._instancePk;
+            this._initialLoad = true;
+        }
+        return super.render();
+    }
+
 }