**Why so much memory is used**
Invisible parts on the UI take memory on the engine because normally the HTML of these dialogs and tabs are eagerly loaded. The whole HTML code is generated and the view state is held on the engine. This requires processing power and memory. One
can quickly identify such parts in a JSF dialog by using the Firefox + Inspect the page content. Loaded but not visible parts are shown as grayed out HTML in the console:
![sample of eagerly loaded content][1]
**How to solve it**
Use the `rendered` attribute to avoid eager loading of large UI parts that are not visible on the initial dialog. Load them on demand with Ajax requests.
A lightweight solution for modal
dialogs:dialogs: In this example we have a button that controls the `rendered` attribute of a `<p:dialog />`.
<h:form id="form">
<p:outputPanel id="address">
<p:commandButton value="Add Address" icon="fa fa-list-alt"
actionListener="#{logic.showAddress(true)}" oncomplete="PF('addressDialog').show()"
update="form:address" />
<p:dialog id="dialog" widgetVar="addressDialog"
header="Large sample component"
modal="true" visible="true" rendered="#{data.showAddress}" closable="false" >
<ic:ch.ivyteam.htmldialog.demo.component.AddressComponent id="input" >
<p:commandButton value="close"
actionListener="#{logic.showAddress(false)}" onclick="PF('addressDialog').hide()"
update="form:address"/>
<br/>
</ic:ch.ivyteam.htmldialog.demo.component.AddressComponent>
</p:dialog>
</p:outputPanel>
</h:form>
[1]: https://answers.axonivy.com/upfiles/portal_processWidgetDialogs.png
