peptide-repo/prautoblogger
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add loading spinners and save feedback to admin UI

Browse Source 
- Save Settings shows "Saving…" on button + green success banner after
  redirect (auto-dismisses after 6s)
- Test Connections shows spinning icon + progress banner while in-flight
- Generate Now shows spinning icon + timed pipeline stage messages so
  the user knows the pipeline is working, not hung
- Shared ab-btn-loading CSS class with smooth dashicon spin animation

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Terence Ong
2026-04-13 09:06:18 +07:00
parent 4f704a5dcd
commit e6cdf576f4
3 changed files with 167 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
assets/css/admin.css
View File

@@ -54,6 +54,53 @@
.ab-btn-outline:hover { border-color: var(--ab-primary); color: var(--ab-primary); background: var(--ab-primary-light); }
.ab-btn:disabled { opacity: 0.6; cursor: not-allowed; }
/* ── Button loading state ───────────────────────────────────────────── */
.ab-btn-loading .dashicons { animation: ab-spin 1s linear infinite; }
@keyframes ab-spin { to { transform: rotate(360deg); } }
.ab-btn-loading { pointer-events: none; opacity: 0.85; }
.ab-btn-loading .ab-btn-label { opacity: 0.9; }
/* ── Save success / error notice ────────────────────────────────────── */
.ab-save-notice {
margin: 16px 0 0; padding: 12px 16px; border-radius: var(--ab-radius);
border-left: 4px solid var(--ab-success); background: var(--ab-card-bg);
font-size: 13px; box-shadow: var(--ab-shadow); display: flex;
align-items: center; gap: 8px; animation: ab-slide-in 0.3s ease;
}
.ab-save-notice.notice-error { border-left-color: var(--ab-danger); }
.ab-save-notice .dashicons {
font-size: 18px; width: 18px; height: 18px; line-height: 18px;
flex-shrink: 0;
}
.ab-save-notice .dashicons-saved { color: var(--ab-success); }
.ab-save-notice .dashicons-warning { color: var(--ab-danger); }
@keyframes ab-slide-in {
from { opacity: 0; transform: translateY(-8px); }
to { opacity: 1; transform: translateY(0); }
}
/* ── Pipeline progress stage ────────────────────────────────────────── */
.ab-progress-stage {
margin: 16px 0; padding: 14px 18px; border-radius: var(--ab-radius);
background: var(--ab-primary-light); border: 1px solid #c7d2fe;
font-size: 13px; color: var(--ab-primary); font-weight: 500;
display: flex; align-items: center; gap: 10px;
animation: ab-slide-in 0.3s ease;
}
.ab-progress-stage .dashicons {
font-size: 16px; width: 16px; height: 16px; line-height: 16px;
animation: ab-spin 1s linear infinite;
}
.ab-progress-dots::after {
content: ''; animation: ab-dots 1.5s steps(3, end) infinite;
}
@keyframes ab-dots {
0% { content: ''; }
33% { content: '.'; }
66% { content: '..'; }
100% { content: '...'; }
}
/* ── Stats bar ───────────────────────────────────────────────────────── */
.ab-stats-bar {
display: flex; gap: 1px; margin: 20px 0 0; background: var(--ab-border);

114
assets/js/admin.js
View File

@@ -1,7 +1,8 @@
/**
* PRAutoBlogger admin JavaScript.
*
* Handles: tab switching, "Generate Now", "Test Connections", review queue actions.
* Handles: tab switching, "Generate Now" with pipeline progress stages,
* "Test Connections" with spinner, review queue actions, save feedback.
* Uses vanilla jQuery (WordPress admin already loads it).
*
* @see admin/class-admin-page.php — Localizes prautobloggerAdmin object.
@@ -37,6 +38,29 @@
}
});
/*
* ── Save Settings feedback ─────────────────────────────────────────
* Shows "Saving…" on submit, auto-hides success notice after a delay.
*/
$(document).on('submit', '#ab-settings-form', function () {
var $btn = $(this).find('input[type="submit"]');
$btn.val('Saving…').prop('disabled', true);
});
// Auto-dismiss save notice after 6 seconds.
$(function () {
var $notice = $('#ab-save-notice');
if ($notice.length) {
setTimeout(function () {
$notice.fadeOut(400, function () { $(this).remove(); });
}, 6000);
}
});
/*
* ── Helpers ─────────────────────────────────────────────────────────
*/
/**
* Show a status message in the admin page.
*
@@ -50,16 +74,81 @@
if (type === 'error') {
$el.addClass('error');
}
hideProgress();
}
/**
* Handle "Generate Now" button click.
* Show a progress stage message with spinner.
*
* @param {string} message The stage text to display.
*/
function showProgress(message) {
var $el = $('#prautoblogger-progress-stage');
$el.html(
'<span class="dashicons dashicons-update"></span>' +
'<span>' + message + '</span>'
).show();
// Hide the status message while progress is shown.
$('#prautoblogger-status-message').addClass('hidden');
}
/** Hide the progress stage message. */
function hideProgress() {
$('#prautoblogger-progress-stage').hide();
}
/**
* Set a button into loading state with spinner.
*
* @param {jQuery} $btn The button element.
* @param {string} text The loading text to show.
*/
function setButtonLoading($btn, text) {
$btn.addClass('ab-btn-loading')
.prop('disabled', true);
$btn.find('.ab-btn-label').text(text);
}
/**
* Reset a button back to its default state.
*
* @param {jQuery} $btn The button element.
* @param {string} text The default text to restore.
*/
function resetButton($btn, text) {
$btn.removeClass('ab-btn-loading')
.prop('disabled', false);
$btn.find('.ab-btn-label').text(text);
}
/*
* ── Generate Now ───────────────────────────────────────────────────
* Shows pipeline stages while the request is in-flight so the user
* knows it hasn't hung.
*/
var generateStages = [
{ text: 'Collecting sources from Reddit…', delay: 0 },
{ text: 'Analyzing topics and scoring…', delay: 8000 },
{ text: 'Selecting best topic…', delay: 16000 },
{ text: 'Generating article draft via AI…', delay: 24000 },
{ text: 'Running editorial pass…', delay: 50000 },
{ text: 'Saving and publishing…', delay: 75000 },
{ text: 'Almost done — finalizing…', delay: 100000 }
];
var stageTimers = [];
$(document).on('click', '#prautoblogger-generate-now', function () {
var $btn = $(this);
if ($btn.prop('disabled')) return;
$btn.prop('disabled', true).text(config.generatingText || 'Generating...');
setButtonLoading($btn, config.generatingText || 'Generating…');
// Start pipeline stage messages.
stageTimers = [];
$.each(generateStages, function (i, stage) {
var t = setTimeout(function () { showProgress(stage.text); }, stage.delay);
stageTimers.push(t);
});
$.ajax({
url: config.ajaxUrl,
@@ -93,19 +182,24 @@
);
},
complete: function () {
$btn.prop('disabled', false).text(config.generateText || 'Generate Now');
// Clear all stage timers.
$.each(stageTimers, function (_, t) { clearTimeout(t); });
stageTimers = [];
hideProgress();
resetButton($btn, config.generateText || 'Generate Now');
}
});
});
/**
* Handle "Test Connections" button click.
/*
* ── Test Connections ───────────────────────────────────────────────
*/
$(document).on('click', '#prautoblogger-test-connection', function () {
var $btn = $(this);
if ($btn.prop('disabled')) return;
$btn.prop('disabled', true).text(config.testingText || 'Testing...');
setButtonLoading($btn, config.testingText || 'Testing…');
showProgress('Testing API connections…');
$.ajax({
url: config.ajaxUrl,
@@ -133,7 +227,7 @@
showStatus('Connection test request failed.', 'error');
},
complete: function () {
$btn.prop('disabled', false).text(config.testText || 'Test Connections');
resetButton($btn, config.testText || 'Test Connections');
}
});
});
@@ -165,7 +259,7 @@
var postId = $btn.data('post-id');
if ($btn.prop('disabled')) return;
$btn.prop('disabled', true).text('Publishing...');
$btn.prop('disabled', true).text('Publishing…');
$.ajax({
url: config.ajaxUrl,
@@ -202,7 +296,7 @@
if (!confirm('Reject this post? It will be moved to trash.')) return;
$btn.prop('disabled', true).text('Rejecting...');
$btn.prop('disabled', true).text('Rejecting…');
$.ajax({
url: config.ajaxUrl,

18
templates/admin/settings-page.php
View File

@@ -34,11 +34,11 @@ $next_run = wp_next_scheduled( 'prautoblogger_daily_generation' );
<div class="ab-header-actions">
<button type="button" id="prautoblogger-test-connection" class="ab-btn ab-btn-outline">
<span class="dashicons dashicons-yes-alt"></span>
<?php esc_html_e( 'Test Connections', 'prautoblogger' ); ?>
<span class="ab-btn-label"><?php esc_html_e( 'Test Connections', 'prautoblogger' ); ?></span>
</button>
<button type="button" id="prautoblogger-generate-now" class="ab-btn ab-btn-primary">
<span class="dashicons dashicons-update"></span>
<?php esc_html_e( 'Generate Now', 'prautoblogger' ); ?>
<span class="ab-btn-label"><?php esc_html_e( 'Generate Now', 'prautoblogger' ); ?></span>
</button>
</div>
</div>
@@ -66,6 +66,20 @@ $next_run = wp_next_scheduled( 'prautoblogger_daily_generation' );
</div>
</div>
<?php if ( isset( $_GET['settings-updated'] ) && 'true' === $_GET['settings-updated'] ) : ?>
<div class="ab-save-notice" id="ab-save-notice">
<span class="dashicons dashicons-saved"></span>
<?php esc_html_e( 'Settings saved successfully.', 'prautoblogger' ); ?>
</div>
<?php endif; ?>
<?php if ( isset( $_GET['error'] ) ) : ?>
<div class="ab-save-notice notice-error" id="ab-save-notice">
<span class="dashicons dashicons-warning"></span>
<?php esc_html_e( 'There was a problem saving your settings. Please try again.', 'prautoblogger' ); ?>
</div>
<?php endif; ?>
<div id="prautoblogger-progress-stage" class="ab-progress-stage" style="display:none;"></div>
<div id="prautoblogger-status-message" class="hidden"></div>
<!-- Tab navigation + settings form -->