p:skeleton use like p:outputPanel

[rider]

Hi,

I would like to use the new p:skeleton.... But only to display this, it make no sense for me...
I would like to use this p:skeleton to open a page, load the content and afterwards show the real content inside the p:skeleton...

How can I do this?
Same, like at facebook etc.

Thanks

[Melloware]

Yep load your page with Skeleton

then with Jquery OnLoad JavaScript call a p:remoteCommand to do an AJAX update and set the skeleton rendered="false" and your real panel rendered="true". So your page will load with the skeleton while in the background AJAX load and replace the panel. That's pretty much what Facebook and others do.

[jepsar]

This is now supported in p:outputPanel:

Code: Select all

<p:outputPanel deferred="true">
    <p:ajax event="load" listener="#{bean.loadData}"/>
    <f:facet name="loading">
        <p:skeleton width="200px" height="21px" class="p-mb-4"/>
        <p:skeleton width="100%" height="63px"/>
    </f:facet>
    <h5>#{bean.data.title}</h5>
    <p>#{bean.data.body}</p>
</p:outputPanel>

https://primefaces.github.io/primefaces ... ding-facet

https://www.primefaces.org/showcase/ui/ ... anel.xhtml