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 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 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 extends Form @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 extends Form }); } + 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(); + } + }