fix: restore proper spinning animation for mobile refresh FAB

Reverted HTML replacement approach and restored the cleaner CSS-based
animation from commit 1855085.

Previous (wrong) approach:
- Replaced button HTML with spinner
- Modified both desktop and mobile buttons in apiClient.js
- Messy and inconsistent

Restored (correct) approach:
- Add/remove .spinning CSS class in click handler
- CSS animates only the icon inside the button
- Button itself stays unchanged
- Much cleaner implementation

Changes:
- Reverted apiClient.js changes from commit 9a49433
- Added .spinning CSS class and @keyframes rpg-spin
- Updated index.js click handler to bind both buttons
- Uses addClass/removeClass for clean animation control
- Includes drag detection to prevent accidental clicks

Now the mobile FAB icon spins smoothly when refreshing!
This commit is contained in:
Lucas 'Paperboy' Rose-Winters
2025-10-22 10:47:09 +11:00
parent 9a49433a28
commit ea2231f6ba
3 changed files with 44 additions and 13 deletions
+2 -11
View File
@@ -97,16 +97,11 @@ export async function updateRPGData(renderUserStats, renderInfoBox, renderThough
try {
setIsGenerating(true);
// Update desktop button to show "Updating..." state
// Update button to show "Updating..." state
const $updateBtn = $('#rpg-manual-update');
const originalHtml = $updateBtn.html();
$updateBtn.html('<i class="fa-solid fa-spinner fa-spin"></i> Updating...').prop('disabled', true);
// Update mobile FAB to show spinner (icon only)
const $updateBtnMobile = $('#rpg-manual-update-mobile');
const originalHtmlMobile = $updateBtnMobile.html();
$updateBtnMobile.html('<i class="fa-solid fa-spinner fa-spin"></i>').prop('disabled', true);
// Save current preset name before switching (if we're going to switch)
if (extensionSettings.useSeparatePreset) {
originalPresetName = await getCurrentPresetName();
@@ -224,14 +219,10 @@ export async function updateRPGData(renderUserStats, renderInfoBox, renderThough
setIsGenerating(false);
// Restore desktop button to original state
// Restore button to original state
const $updateBtn = $('#rpg-manual-update');
$updateBtn.html('<i class="fa-solid fa-sync"></i> Refresh RPG Info').prop('disabled', false);
// Restore mobile FAB to original state (icon only)
const $updateBtnMobile = $('#rpg-manual-update-mobile');
$updateBtnMobile.html('<i class="fa-solid fa-sync"></i>').prop('disabled', false);
// Reset the flag after tracker generation completes
// This ensures the flag persists through both main generation AND tracker generation
// console.log('[RPG Companion] 🔄 Tracker generation complete - resetting lastActionWasSwipe to false');