How to use AjaxLazyLoadPanel in Wicket?

AjaxLazyLoadPanel

A panel where you can lazy load another panel. This can be used if you have a panel/component that is pretty heavy in creation and you first want to show the user the page and the replace the panel when it is ready.

I love this feature , the effect is really awesome and impressive. Here i show how do convert a normal wicket panel to a AjaxLazyLoadPanel.

Original Panel

HTML file

<span wicket:id="price"><span>

Java file

add(new PricePanel("price"));

Lazy load Panel

HTML file (no change)

<span wicket:id="price"><span>

Java file

add(new AjaxLazyLoadPanel("price")
{
  @Override
  public Component getLazyLoadComponent(String id)
  {
       return PricePanel(id);
  }
});

Done, now the PricePanel has the lazy loading effect. Nice

However one of the drawback of this AjaxLazyLoadPanel is Wicket does not has AjaxLazyLoadPanel fallback version. When browser’s javascript is disabled, the image will keep loading forever.

Here is a trick that play around with it.

1) Put following code in Wicket’s application class

protected void init() {		
		getRequestCycleSettings().setGatherExtendedBrowserInfo(true);
}

2) Conditional it

WebClientInfo clientInfo = (WebClientInfo)WebRequestCycle.get().getClientInfo();
if(clientInfo.getProperties().isJavaEnabled()){
add(new AjaxLazyLoadPanel("price")
{
  @Override
  public Component getLazyLoadComponent(String id)
  {
       return PricePanel("price");
  }
});
}else{
  add(new PricePanel("price"));
}

Above function will run the AjaxLazyLoadPanel function if browser’s Javscript or Ajax is enable , else it will delegate to normal request.

Do share with me, if you have any alternative ways to implement the AjaxLazyLoadPanel fallback version

Reference

How do detect browser javascript or ajax disabled in Wicket?