how to centre the busy indicator of the AjaxLazyLoadPanel - ajax

Question

I have a modal that displays 3 different panels consecutively (in agreement with the user's choices).
The second panel of this modal is an AjaxLazyLoadPanel and when it appears it is left aligned and not centred aligned, as it is shown in the image below.
Modal showing the busy indicator 1
How can I centre the busy indicator?
Below is the class of the modal
public class DetailsModal2 extends Modal<IModel<PaymentDomain>> {
#SpringBean
private IService service;
private Component noButton;
private Component yesButton;
private Component noButton;
private String paymentId;
private Panel replacedPanel;
private IModel<PaymentDomain> model;
public DetailsModal2(String id, IModel<PaymentDomain> model, String party)
{
super(id);
this.party = party;
this.model = model;
this.paymentId = model.getObject().getPaymentGUID();
replacedPanel = new AreYouSure("replacedPanel");
replacedPanel = panel1;
replacedPanel.setOutputMarkupId(true);
add(replacedPanel);
addButton(yesButton = new BootstrapAjaxLink<String>("button", null, Buttons.Type.Warning, new ResourceModel("details")) {
private static final long serialVersionUID = 1L;
#Override
public void onClick(AjaxRequestTarget target) {
addNewPanel(new AjaxLazyLoadPanel("replacedPanel") {
#Override
public Component getLazyLoadComponent(String markupId) {
if (!condition)) {
message = service.getPayment(paymentId);
if (message == null) {
return new VotingResultPanel(markupId, true);
} else
{
return new VotingResultPanel(markupId, false);
}
} // close if
else if (condition)) {
message = service.setPayment(paymentId);
if (message == null) {
return new VotingResultPanel(markupId, true);
} else {
System.out.println("" + message.getError());
return new VotingResultPanel(markupId, false);
}
}
else {
System.out.println("error");
}
}
}, target);
this.setOutputMarkupPlaceholderTag(true);
this.setVisible(false);
noButton.setOutputMarkupPlaceholderTag(true);
noButton.setVisible(false);
closeButton.setVisible(true);
target.add(this, noButton, closeButton);
}
});
noButton = new BootstrapAjaxLink<String>("button", null, Buttons.Type.Primary) {
private static final long serialVersionUID = 1L;
#Override
public void onClick(AjaxRequestTarget target){
close(target);
}
}.setLabel(Model.of("No"));
addButton(noButton);
}
closeButton = new BootstrapAjaxLink<String>("button", null,
Buttons.Type.Primary) {
private static final long serialVersionUID = 1L;
#Override
public void onClick(AjaxRequestTarget target){
addNewPanel(panel1,target);
yesButton.setOutputMarkupId(true);
yesButton.setVisible(true);
noButton.setOutputMarkupId(true);
noButton.setVisible(true);
closeButton.setOutputMarkupId(true);
closeButton.setOutputMarkupPlaceholderTag(true);
closeButton.setVisible(false);
target.add(yesButton,noButton,closeButton);
close(target);
}
}.setLabel(Model.of("Close"));
closeButton.setOutputMarkupPlaceholderTag(true);
closeButton.setVisible(false);
addButton(closeButton);
}
public void addNewPanel(Panel addpanel, AjaxRequestTarget target) {
Panel newPanel = null;
newPanel = addpanel;
newPanel.setOutputMarkupId(true);
replacedPanel.replaceWith(newPanel);
target.add(newPanel);
replacedPanel = newPanel;
}
}// close class

Answer 1

Have a look at the method AjaxLazyLoadPanel.getLoadingComponent(String). That's the one that creates the busy indicator.
The default implementation simply creates a img tag without any styling:
public Component getLoadingComponent(final String markupId)
{
IRequestHandler handler = new ResourceReferenceRequestHandler(
AbstractDefaultAjaxBehavior.INDICATOR);
return new Label(markupId, "<img alt=\"Loading...\" src=\"" +
RequestCycle.get().urlFor(handler) + "\"/>").setEscapeModelStrings(false);
}
You could overwrite that method and for example surround the img tag with a div tag that has some additional CSS:
#Override
public Component getLoadingComponent(final String markupId)
{
IRequestHandler handler = new ResourceReferenceRequestHandler(
AbstractDefaultAjaxBehavior.INDICATOR);
return new Label(markupId, "<div style=\"text-align: center\"><img alt=\"Loading...\" src=\"" +
RequestCycle.get().urlFor(handler) + "\"/></div>").setEscapeModelStrings(false);
}
Of course you could also return a completly custom Wicket Panel which could show a more complex busy indicator with text, graphics, colours, etc.