nuBuilder Forum

Posted: **Mon Feb 07, 2022 10:35 am**

Hi,

I have a JS function that runs just long enough as to annoy the user; as there is no visual feedback that indicates that the system is busy. I have implemented a spinner on the button as in this image. This solves the user problem, but I was wondering if there is not a more eloquent way in nuBuilder to produce the same type of result for the user?

Capture.PNG

In Setup->Header I have added the following code:

Code: Select all

function pgtAddActionButton(id, text, fn) {
	$('#nuActionHolder').append("<button id='" + id + "' type='button' class='nuActionButton has-spinner' onclick='buttonLoaderClick(" + '"' + id + '"' + ", " + fn + ")'>" + text + "</button>");
}

function buttonLoaderClick(id, fn) {
    $('#' + id).buttonLoader('start');
    return new Promise(resolve => {
        setTimeout(() => {
            fn();
            $('#' + id).buttonLoader('stop');
            resolve();
        }, 50);
    });
}

(function ($) {
    $.fn.buttonLoader = function (action) {
        var self = $(this);

        //start loading animation
        if (action == 'start') {
            if ($(self).attr("disabled") == "disabled") {
                e.preventDefault();
            }
            //disable buttons when loading state
            $('.has-spinner').attr("disabled", "disabled");
            $(self).attr('data-btn-text', $(self).text());
            //binding spinner element to button and changing button text
            $(self).prepend('<span class="spinner"><i class="fa fa-spinner fa-spin"></i></span>&nbsp;&nbsp;');
            $(self).addClass('active');
        }
        //stop loading animation
        if (action == 'stop') {
            $(self).html($(self).attr('data-btn-text'));
            $(self).removeClass('active');
            //enable buttons after finish loading
            $('.has-spinner').removeAttr("disabled");
        }
    }
})(jQuery);

In Setup->Style, I have added the following css:

Code: Select all

.spinner {
    display: inline-block;
    opacity: 0;
    width: 0;
    -webkit-transition: opacity 0.25s, width 0.25s;
    -moz-transition: opacity 0.25s, width 0.25s;
    -o-transition: opacity 0.25s, width 0.25s;
    transition: opacity 0.25s, width 0.25s;
}

.has-spinner.active .spinner {
    opacity: 1;
    width: auto;
}

.has-spinner.btn.active .spinner {
    min-width: 20px;
}

On the edit form, I have added the following code to show the button:

Code: Select all

pgtAddActionButton('FCButton', 'Find Cheapest', 'findCheapest');

Posted: **Mon Feb 07, 2022 11:43 am**

There is no inbuilt functionality to achieve that, you'll have to resort to a user-defined function/code to achieve that.

nuBuilder Forum

spinner on nuActionHolder button

spinner on nuActionHolder button

Re: spinner on nuActionHolder button