Show loading GIF while Action Links run

Hey Tadabase Community! :wave:

So you want Action Links to show a loading indicator while running? I’ve got a JavaScript and CSS solution for you until we implement this as a native feature.

Here’s how the result will look.
2022-01-27_21-10-50

Step 1: Add a CSS class to the Action Links column called “myAction”

Step 2: Add the following CSS to the page

.td-link.disabled {
    display: none !important;
}

Step 3: Find the Component ID for your table

Step 4: Add the following JavaScript to the page but change “component_ID” to your tables ID in Step 3

TB.render('component_ID', function (data) {
    setTimeout(function () {
        $('.myAction .td-link').each(function (index) {
            new MutationObserver(function (mutations, observer) {
                mutations.forEach(function (mutation) {
                    if ($(mutation.target).hasClass('disabled')) {
                        $(mutation.target).parent().append('<div class="action-link-loader"><span>Loading... </span><img src="../../../images/spinner-light.gif" width="12px"></div>');
                    } else {
                        $(mutation.target).parent().find('.action-link-loader').remove();
                    }
                });
            }).observe(this, {
                attributes: true,
                attributeFilter: ['class']
            });
        });
    }, 25);
});

Thanks so much! Is there any way you can have this work when using a button on an action link instead of text?

I tried and it does work when the action link is text, but it doesn’t do anything when the action link is a button. I would love to have it work for that to.

Also, It would be great if we could combine the action-link-refresh into this so it would also be able to refresh the other table automatically. I currently have action-link-refresh as the css and I have to replace it with myAction, which means now I don’t have the ability to have the loading indicator and the ability to automatically refresh the table thats being updated by the action link.

This would be to combine the loading gif and the auto refresh Auto-refresh for datatable

It would be amazing to show the loading gif every time something is clicked or loading.

@Chem How can I combine the use of the loading… AND auto table refresh? Is there a way?

@Chem This does not work when using buttons. Only links. Any way to get this loading text to appear when using a button for an action link?

@Chem Chem, would love to get a response on this. I need to be able to have the loading indicator AND refresh a connected table

@centellix

This should work with buttons

TB.render('component_ID', function (data) {
    setTimeout(function () {
        $('.myAction .td-data-link').each(function (index) {
            new MutationObserver(function (mutations, observer) {
                mutations.forEach(function (mutation) {
                    if ($(mutation.target).hasClass('disabled')) {
                        console.log($(mutation.target).parent())
                        $(mutation.target).append('<div class="action-link-loader"><span>Loading... </span><img src="../../../images/spinner-light.gif" width="12px"></div>');
                    } else {
                        $(mutation.target).find('.action-link-loader').remove();
                    }
                });
            }).observe(this, {
                attributes: true,
                attributeFilter: ['class']
            });
        });
    }, 25);
});
1 Like

@Chem

I am planning to use this code later this week. Does the JS include both the loading indicator AND refresh the connected table like @centellix mentions ?

Hey @slimpens the JS above will not refresh connected tables but you may certainly add one line of code to do that.

You can programmatically refresh all tables by triggering

 $('.t-refresh-button').click();  

or you can target a specific table by adding a CSS Class to the table, for example “my-table”


and then use the following in JavaScript

$('.my-table .t-refresh-button').click();