Hello,
i have a rater complex site constructed of many small components based on PolymerTemplate, because the elements are repetitive. The problem now is, that even the smallest components take seconds to load, in sum the page takes >30 seconds to load. For example the element below:
MicroItemComponent.java
package XXX.XX.XXXXX.client.components;
import com.vaadin.flow.component.HasSize;
import com.vaadin.flow.component.HasStyle;
import com.vaadin.flow.component.Tag;
import com.vaadin.flow.component.dependency.JsModule;
import com.vaadin.flow.component.polymertemplate.Id;
import com.vaadin.flow.component.polymertemplate.PolymerTemplate;
import com.vaadin.flow.templatemodel.TemplateModel;
import com.vaadin.flow.component.html.H3;
import com.vaadin.flow.component.html.H1;
@Tag("microitem-component")
@JsModule("./microitem-component.js")
public class MicroItemComponent extends PolymerTemplate<MicroItemComponent.MacroItemComponentModel> implements HasStyle, HasSize {
public interface MacroItemComponentModel extends TemplateModel {
}
@Id("property")
private H1 property;
@Id("title")
private H3 title;
public MicroItemComponent() {
}
public void setContent(String title1, String prop1)
{
this.title.setText(title1);
this.property.setText(prop1);
}
public void setTitle(String title)
{
this.title.setText(title);
}
public void setProperty(String prop)
{
this.property.setText(prop);
}
public void setPropertyColor(String color)
{
this.property.getElement().getStyle().set("color", color);
}
public void setPropertyColorDefault()
{
this.property.getElement().getStyle().remove("color");
}
}
and the microitem-component.js file (i am by no means any web dev, so the css styles and html may be redundant or plain wrong…):
import '@polymer/polymer/polymer-legacy.js';
import '@vaadin/vaadin-ordered-layout/src/vaadin-vertical-layout.js';
import '@vaadin/vaadin-ordered-layout/src/vaadin-horizontal-layout.js';
import { html } from '@polymer/polymer/lib/utils/html-tag.js';
import { PolymerElement } from '@polymer/polymer/polymer-element.js';
class MicroitemComponent extends PolymerElement {
static get template() {
return html`
<style include="shared-styles">
:host {
display: block;
}
.outerItem
{
padding: 0;
background: var(--lumo-base-color);
height:100%;
}
.innerItem
{
width:100%;
height:100%;
border: 1px solid var(--lumo-contrast-20pct);
}
h1, h3
{
text-align: center;
margin-top:2px;
margin-bottom:2px;
display: block;
margin-left: auto;
margin-right: auto;
font-family: var(--lumo-font-family);
color: var(--lumo-body-text-color);
}
h3.title
{
color: var(--lumo-primary-text-color);
}
h1
{
font-size:16px;
}
h3
{
font-size:13px;
}
</style>
<vaadin-horizontal-layout class="outerItem">
<vaadin-vertical-layout class="innerItem" id="vaadinVerticalLayout">
<h3 class="title" id="title">Heading 3</h3>
<h1 id="property">Heading 1</h1>
</vaadin-vertical-layout>
</vaadin-horizontal-layout>
`;
}
static get is() {
return 'microitem-component';
}
static get properties() {
return {
// Declare your properties here.
};
}
}
customElements.define(MicroitemComponent.is, MicroitemComponent);
Is taking up to 4 seconds to load (see the image in attachment) (it is loading 4 of this components, so it my take ~1 second for one).
I am using Vaadin 14 LTS and Tomcat 9.0 as server.
I have replaced the upper PolymerTemplate by a Composite component and the loading time is negligible, so i do not think it is a problem on my side loading the data, or measuring wrong. I do not like to replace this with a Composite component, because it introduces other problems (see other post).
This project was ported from vaadin 13 with the help of the maven plugin. If i remember correctly i saw the same behaviour on vaadin 13…
Any help and hint would be appreciated!
Thank you!
