BuddyPress.org

Hello,

I’m trying to add a spinner gif to the webpage whenever someone clicks a button that uses AJAX to show them that their request is being worked on. I wish to use the Nouveau theme.

I’m running WordPress 5.1 and BuddyPress 4.2.0

There hasn’t been much on this topic except for here (which is now 4.75yrs old): Feature Request AJAX Loading Spinner

To start, I’m trying to get things to work with the messaging section.

I added <img class='ajax-gif' src='http://localhost:8080/WEBSITE/wp-content/themes/THEME/classicloader30px.gif'/>

to a file I made in my theme file for the messages template:
wp-content/themes/THEME/buddypress/common/js-templates/messages/index.php

It was added underneath each input type=button and input type=submit.

Next I added this css:

.ajax-gif{
	display:none;
}

.loading + .ajax-gif, .loading > .ajax-gif{
	display:block;
}

My only problem now is that these buttons do not apply the “loading” class to the buttons anymore (like they do in Legacy).
I found that you can add and remove the classes during the function that is triggered on the click by going to /wp-content/plugins/buddypress/bp-templates/bp-nouveau/js/buddypress-messages.js.
Unfortunately, I don’t believe this is a file meant to be able to be changed in custom files.

I added:
$('#bp-messages-send').addClass('loading'); to sendMessage: function(),
$( '#send_reply_button' ).addClass( 'loading' ); to sendReply: function(),
and $( '#send_reply_button' ).removeClass( 'loading' ); to replySent and replyError.

Any help in figuring out how to make this not be lost on a new BuddyPress update would be extremely helpful.

I’m also trying to figure out how to target any other BuddyPress AJAX events. I’m sure I can do the same thing with the Members Directory, but will probably need to do the same thing with figuring out what function is called when someone requests a friendship/cancel a friendship etc.