Thanks for the suggestion - I agree.
Here's a bit of code that should do the trick:
- create a img folder and add a animated gif called loading.gif (WP ships with one under wp-admin/images.
- update simplemodal-login.php and add the following code after the <p class="submit">...</p> block of code:
<div class="simplemodal-login-loading" style="display:none"></div>
- update default.css and add:
#simplemodal-login-container .simplemodal-login-loading {background:url(../img/loading.gif) center no-repeat; height:20px; position:absolute; width:100%;}
- update default.js and change the if (SimpleModalLogin.isValid(form)) { ... } block of code to:
if (SimpleModalLogin.isValid(form)) {
buttons.hide();
loading.show();
$.ajax({
url: form[0].action,
data: form.serialize(),
type: 'POST',
cache: false,
success: function (resp) {
var data = $('<div></div>').append(resp),
error = $('#login_error', data[0]),
loginform = $('#loginform', data[0]);
if (error.length > 0) {
loading.hide();
buttons.show();
$('p:first', form[0]).before(error);
}
else if (loginform.length > 0) {
loading.hide();
buttons.show();
SimpleModalLogin.showError(form, 'empty_both');
}
else {
var redirect = $('#redirect_to', form[0]).val(),
href = location.href;
if (redirect.length > 0) {
if (SimpleModalLogin.url && SimpleModalLogin.url.indexOf("redirect_to") !== -1) {
var p = SimpleModalLogin.url.split("=");
href = unescape(p[1]);
}
else {
href = redirect;
}
}
window.location = href;
dialog.close();
}
}
});
}
That will hide the buttons and show the animated gif after the submit.
