How to delay Primefaces AjaxStatus on JSF?

Question

How to add a delay (300ms for example) on when the Primefaces' AjaxStatus would show. Right now it shows always immediately when there's an Ajax request pending. This is troublesome for example on "onkeyUp" events when each key stroke brings the loading dialog up for a split second.

Here's my AjaxStatus loading indicator component:

<p:ajaxStatus id="startAjax" onstart="PF('start').show();" oncomplete="PF('start').hide();" >
</p:ajaxStatus>

<p:dialog widgetVar="start" showHeader="false" resizable="false">
    <h:graphicImage value="#{resource['/images/loading.gif']}"></h:graphicImage>
</p:dialog>

Answer 1

You need to wrap your PF('start').start() with a function which will call it with a delay. Also, the onComplete handler should check if you have pending status to show and cancel them. This is to avoid the case where ajax finished before status displayed.

Code should be something like this (not tested)

<p:ajaxStatus id = "startAjax" onstart = "startHandler();" oncomplete = "endHandler();"/>
    <script>
        var ajaxInProgress;
        function startHandler() {
            ajaxInProgress = setTimeout(function () {
                PF('start').show();
            }, 3000);
        }
        function endHandler() {
            clearTimeout(ajaxInProgress);
            PF('start').hide();
            ajaxInProgress = null;
        }
    </script>

Answer 2

I submitted a PR that this delay attribute will be native in PF 7.1+.

https://github.com/primefaces/primefaces/pull/5138

Thanks for the suggestion!