From d38f944435370380e26b121301eedd082c94a084 Mon Sep 17 00:00:00 2001
From: Jens Langhammer <jens.langhammer@beryju.org>
Date: Sat, 5 Jun 2021 20:45:20 +0200
Subject: [PATCH] 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      |  8 ++++++--
 web/src/elements/forms/ModelForm.ts | 21 +++++++++++++++++----
 2 files changed, 23 insertions(+), 6 deletions(-)

diff --git a/web/src/elements/forms/Form.ts b/web/src/elements/forms/Form.ts
index 931978041..42ff7bc08 100644
--- a/web/src/elements/forms/Form.ts
+++ b/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();
diff --git a/web/src/elements/forms/ModelForm.ts b/web/src/elements/forms/ModelForm.ts
index 1294a4443..bc272990d 100644
--- a/web/src/elements/forms/ModelForm.ts
+++ b/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();
+    }
+
 }