Suppress PrimeFaces 12 commandButton loading indicator icon

Question

With PrimeFaces 12, an Ajax loading status indicator icon is introduced to p:commandButton. See https://github.com/primefaces/primefaces/pull/8302

I don't want to use that have loading status indicator icon to appear in my project, but I can't find an option to disable it. So, how can I disable the Ajax loading status indicator icon?

Answer 1

As you can read in the linked pull request, we've chosen to add a class (ui-state-loading) to the button which triggered the Ajax request. With this class you can fully customize how your button should look while an Ajax request is running. You can easily suppress the indicator to the normal state by applying:

html .ui-state-loading.ui-button-text-only .ui-icon-loading + .ui-button-text {
    opacity: inherit;
}
html .ui-state-loading .ui-icon-loading {
    display: none;
}
html .ui-state-loading .ui-icon:not(.ui-icon-loading) {
    display: inherit;
}

See also:

• How do I override default PrimeFaces CSS with custom styles?

If you don't want the button to be disabled during the Ajax request, use the disableOnAjax="false" attribute.