Skip to content
Snippets Groups Projects
Commit f880aad8 authored by Reiter, Christoph's avatar Reiter, Christoph :snake:
Browse files

Show a loading spinner while the iframe is loading

parent 384ad499
No related branches found
No related tags found
No related merge requests found
Pipeline #34236 passed
import {LitElement, html, css} from "lit-element";
import {classMap} from 'lit-html/directives/class-map.js';
import {MiniSpinner} from '@dbp-toolkit/common';
import {ScopedElementsMixin} from '@open-wc/scoped-elements';
/**
* Set the URL via setUrl(), reset via reset().
......@@ -7,13 +10,26 @@ import {LitElement, html, css} from "lit-element";
* * signature-error with a "message"
* * signature-done with an "id"
*/
export class ExternalSignIFrame extends LitElement {
export class ExternalSignIFrame extends ScopedElementsMixin(LitElement) {
constructor() {
super();
this._loading = false;
this._onReceiveIframeMessage = this._onReceiveIframeMessage.bind(this);
}
static get scopedElements() {
return {
'dbp-mini-spinner': MiniSpinner,
};
}
static get properties() {
return {
_loading: { type: Boolean, attribute: false },
};
}
connectedCallback() {
super.connectedCallback();
window.addEventListener('message', this._onReceiveIframeMessage);
......@@ -47,6 +63,7 @@ export class ExternalSignIFrame extends LitElement {
setUrl(url) {
let iframe = this.renderRoot.querySelector("#iframe");
this._loading = true;
iframe.src = url;
}
......@@ -68,13 +85,26 @@ export class ExternalSignIFrame extends LitElement {
width: 100%;
height: 100%;
}
.hidden {
display: none;
}
`;
}
render() {
let onDone = (event) => {
this._loading = false;
};
return html`
${ this._loading ? html`<dbp-mini-spinner></dbp-mini-spinner>` : html`` }
<!-- "scrolling" is deprecated, but still seem to help -->
<iframe id="iframe" scrolling="no"></iframe>
<iframe id="iframe" class=${classMap({hidden: this._loading})}
@load="${onDone}"
@error="${onDone}"
scrolling="no"></iframe>
`;
}
}
\ No newline at end of file
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment