feat(ui5-static-area-item): implement lazy loading

packages/base/src/StaticAreaItem.js

@@ -1,4 +1,5 @@
 import { getStaticAreaInstance, removeStaticArea } from "./StaticArea.js";
+import RenderScheduler from "./RenderScheduler.js";
 
 /**
  * @class
@@ -9,6 +10,11 @@ import { getStaticAreaInstance, removeStaticArea } from "./StaticArea.js";
 class StaticAreaItem {
 	constructor(_ui5ElementContext) {
 		this.ui5ElementContext = _ui5ElementContext;
+		this._rendered = false;
+	}
+
+	isRendered() {
+		return this._rendered;
 	}
 
 	/**
@@ -26,6 +32,7 @@ class StaticAreaItem {
 			this.staticAreaItemDomRef.classList.add(this.ui5ElementContext._id); // used for getting the popover in the tests
 
 			getStaticAreaInstance().appendChild(this.staticAreaItemDomRef);
+			this._rendered = true;
 		}
 
 		this.ui5ElementContext.constructor.render(renderResult, this.staticAreaItemDomRef.shadowRoot, stylesToAdd, { eventContext: this.ui5ElementContext });
@@ -68,7 +75,11 @@ class StaticAreaItem {
 	 * @protected
 	 * Returns reference to the DOM element where the current fragment is added.
 	 */
-	getDomRef() {
+	async getDomRef() {
+		if (!this._rendered || !this.staticAreaItemDomRef) {
+			this._updateFragment();
+		}
+		await RenderScheduler.whenDOMUpdated(); // Wait for the content of the ui5-static-area-item to be rendered
 		return this.staticAreaItemDomRef.shadowRoot;
 	}
 }

packages/base/src/UI5Element.js

@@ -94,7 +94,6 @@ class UI5Element extends HTMLElement {
 	 */
 	async connectedCallback() {
 		const needsShadowDOM = this.constructor._needsShadowDOM();
-		const needsStaticArea = this.constructor._needsStaticArea();
 		const slotsAreManaged = this.constructor.getMetadata().slotsAreManaged();
 
 		// Render the Shadow DOM
@@ -111,11 +110,6 @@ class UI5Element extends HTMLElement {
 				this.onEnterDOM();
 			}
 		}
-
-		// Render Fragment if neccessary
-		if (needsStaticArea) {
-			this.staticAreaItem._updateFragment(this);
-		}
 	}
 
 	/**
@@ -465,7 +459,7 @@ class UI5Element extends HTMLElement {
 		this._upToDate = true;
 		this._updateShadowRoot();
 
-		if (this.constructor._needsStaticArea()) {
+		if (this._shouldUpdateFragment()) {
 			this.staticAreaItem._updateFragment(this);
 		}
 
@@ -663,6 +657,10 @@ class UI5Element extends HTMLElement {
 		return !!this.template;
 	}
 
+	_shouldUpdateFragment() {
+		return this.constructor._needsStaticArea() && this.staticAreaItem.isRendered();
+	}
+
 	/**
 	 * @private
 	 */

packages/fiori/src/ShellBar.js

@@ -368,10 +368,8 @@ class ShellBar extends UI5Element {
 
 		this._actionList = {
 			itemPress: event => {
-				const popover = this.getStaticAreaItemDomRef().querySelector(".ui5-shellbar-overflow-popover");
-
 				if (!this._defaultItemPressPrevented) {
-					popover.close();
+					this.overflowPopover.close();
 				}
 
 				this._defaultItemPressPrevented = false;
@@ -380,15 +378,13 @@ class ShellBar extends UI5Element {
 
 		this._header = {
 			press: event => {
-				const menuPopover = this.getStaticAreaItemDomRef().querySelector(".ui5-shellbar-menu-popover");
-
 				if (this.menuItems.length) {
 					this._menuPopoverItems = [];
 					this.menuItems.forEach(item => {
 						this._menuPopoverItems.push(item.textContent);
 					});
 					this.updateStaticAreaItemContentDensity();
-					menuPopover.openBy(this.shadowRoot.querySelector(".ui5-shellbar-menu-button"));
+					this.menuPopover.openBy(this.shadowRoot.querySelector(".ui5-shellbar-menu-button"));
 				}
 			},
 		};
@@ -442,8 +438,9 @@ class ShellBar extends UI5Element {
 			left: 0,
 		};
 
-		this._handleResize = event => {
-			this.getStaticAreaItemDomRef().querySelector(".ui5-shellbar-overflow-popover").close();
+		this._handleResize = async event => {
+			await this._getResponsivePopover();
+			this.overflowPopover.close();
 			this._overflowActions();
 		};
 	}
@@ -494,10 +491,8 @@ class ShellBar extends UI5Element {
 	 * @public
 	 */
 	closeOverflow() {
-		const popover = this.getStaticAreaItemDomRef().querySelector(".ui5-shellbar-overflow-popover");
-
-		if (popover) {
-			popover.close();
+		if (this.overflowPopover) {
+			this.overflowPopover.close();
 		}
 	}
 
@@ -626,10 +621,9 @@ class ShellBar extends UI5Element {
 	}
 
 	_toggleActionPopover() {
-		const popover = this.getStaticAreaItemDomRef().querySelector(".ui5-shellbar-overflow-popover");
 		const overflowButton = this.shadowRoot.querySelector(".ui5-shellbar-overflow-button");
 		this.updateStaticAreaItemContentDensity();
-		popover.openBy(overflowButton);
+		this.overflowPopover.openBy(overflowButton);
 	}
 
 	_onkeydown(event) {
@@ -819,6 +813,12 @@ class ShellBar extends UI5Element {
 		}
 	}
 
+	async _getResponsivePopover() {
+		const staticAreaItem = await this.getStaticAreaItemDomRef();
+		this.overflowPopover = staticAreaItem.querySelector(".ui5-shellbar-overflow-popover");
+		this.menuPopover = staticAreaItem.querySelector(".ui5-shellbar-menu-popover");
+	}
+
 	get classes() {
 		return {
 			wrapper: {

packages/fiori/test/pages/ShellBar.html

@@ -225,7 +225,8 @@ <h3>ShellBar in Compact</h3>
 	});
 
 	["disc", "call"].forEach(function(id) {
-		window[id].addEventListener("ui5-itemClick", function(event) {
+        var currenItem = window[id][0] || window[id];
+		currenItem.addEventListener("ui5-itemClick", function(event) {
 			event.preventDefault();
 			window["press-input"].value = event.target.id;
 			window["custom-item-popover"].openBy(event.detail.targetRef);

packages/main/src/ComboBox.js

@@ -298,8 +298,9 @@ class ComboBox extends UI5Element {
 		this._initialRendering = false;
 	}
 
-	onAfterRendering() {
-		if (isPhone() && this._respPopover.opened) {
+	async onAfterRendering() {
+		await this._respPopover();
+		if (isPhone() && this.responsivePopover.opened) {
 			// Set initial focus to the native input
 			this.inner.focus();
 		}
@@ -333,7 +334,7 @@ class ComboBox extends UI5Element {
 	}
 
 	_toggleRespPopover() {
-		if (this._respPopover.opened) {
+		if (this.responsivePopover.opened) {
 			this._closeRespPopover();
 		} else {
 			this._openRespPopover();
@@ -387,12 +388,12 @@ class ComboBox extends UI5Element {
 	}
 
 	_closeRespPopover() {
-		this._respPopover.close();
+		this.responsivePopover.close();
 	}
 
 	_openRespPopover() {
 		this.updateStaticAreaItemContentDensity();
-		this._respPopover.open(this);
+		this.responsivePopover.open(this);
 	}
 
 	_filterItems(str) {
@@ -459,11 +460,13 @@ class ComboBox extends UI5Element {
 	}
 
 	get inner() {
-		return isPhone() ? this._respPopover.querySelector(".ui5-input-inner-phone") : this.shadowRoot.querySelector("[inner-input]");
+		return isPhone() ? this.responsivePopover.querySelector(".ui5-input-inner-phone") : this.shadowRoot.querySelector("[inner-input]");
 	}
 
-	get _respPopover() {
-		return this.getStaticAreaItemDomRef().querySelector("ui5-responsive-popover");
+	async _respPopover() {
+		const staticAreaItem = await this.getStaticAreaItemDomRef();
+		this.responsivePopover = staticAreaItem.querySelector("ui5-responsive-popover");
+		return this.responsivePopover;
 	}
 
 	get editable() {

packages/main/src/DatePicker.js

@@ -283,7 +283,7 @@ class DatePicker extends UI5Element {
 			allowTargetOverlap: true,
 			stayOpenOnScroll: true,
 			afterClose: () => {
-				const calendar = this._respPopover.querySelector(`#${this._id}-calendar`);
+				const calendar = this.responsivePopover.querySelector(`#${this._id}-calendar`);
 
 				this._isPickerOpen = false;
 
@@ -299,7 +299,7 @@ class DatePicker extends UI5Element {
 				calendar._hideYearPicker();
 			},
 			afterOpen: () => {
-				const calendar = this._respPopover.querySelector(`#${this._id}-calendar`);
+				const calendar = this.responsivePopover.querySelector(`#${this._id}-calendar`);
 				const dayPicker = calendar.shadowRoot.querySelector(`#${calendar._id}-daypicker`);
 
 				const selectedDay = dayPicker.shadowRoot.querySelector(".ui5-dp-item--selected");
@@ -425,7 +425,7 @@ class DatePicker extends UI5Element {
 
 	_click(event) {
 		if (isPhone()) {
-			this._respPopover.open(this);
+			this.responsivePopover.open(this);
 			event.preventDefault(); // prevent immediate selection of any item
 		}
 	}
@@ -567,8 +567,9 @@ class DatePicker extends UI5Element {
 		return getRTL() ? "rtl" : "ltr";
 	}
 
-	get _respPopover() {
-		return this.getStaticAreaItemDomRef().querySelector("ui5-responsive-popover");
+	async _respPopover() {
+		const staticAreaItem = await this.getStaticAreaItemDomRef();
+		return staticAreaItem.querySelector("ui5-responsive-popover");
 	}
 
 	_canOpenPicker() {
@@ -611,7 +612,7 @@ class DatePicker extends UI5Element {
 	 * @public
 	 */
 	closePicker() {
-		this._respPopover.close();
+		this.responsivePopover.close();
 	}
 
 	/**
@@ -621,14 +622,15 @@ class DatePicker extends UI5Element {
 	 * Specify this option to focus the input field.
 	 * @public
 	 */
-	openPicker(options) {
+	async openPicker(options) {
+		this.responsivePopover = await this._respPopover();
 		this._changeCalendarSelection();
 
 		if (options && options.focusInput) {
 			this._focusInputAfterOpen = true;
 		}
 
-		this._respPopover.open(this);
+		this.responsivePopover.open(this);
 		this._isPickerOpen = true;
 	}
 

packages/main/src/Input.js

@@ -468,7 +468,7 @@ class Input extends UI5Element {
 	_onfocusout(event) {
 		// if focusout is triggered by pressing on suggestion item skip invalidation, because re-rendering
 		// will happen before "itemPress" event, which will make item "active" state not visualized
-		if (this.Suggestions && event.relatedTarget && event.relatedTarget.shadowRoot.contains(this.Suggestions._respPopover)) {
+		if (this.Suggestions && event.relatedTarget && event.relatedTarget.shadowRoot && event.relatedTarget.shadowRoot.contains(this.Suggestions.responsivePopover)) {
 			return;
 		}