fix: prevent animation flickering by checking for URL change during HTMX settlement

assets/js/main.js

@@ -4,6 +4,8 @@
 document.addEventListener('DOMContentLoaded', () => {
     console.log('Palina theme loaded!');
 
+    let lastUrl = window.location.pathname;
+
     // Staggered fade-in animation for post grid
     const animateGridItems = (container = document) => {
         const gridItems = container.querySelectorAll('.post-grid-item:not(.animated)');
@@ -20,8 +22,10 @@ document.addEventListener('DOMContentLoaded', () => {
     // Re-run animation and other setup when HTMX settles new content
     // Use document instead of document.body to persist across boosted navigation
     document.addEventListener('htmx:afterSettle', (event) => {
-        // Global page fade-in animation - only on full boosted navigations
-        if (event.detail.boosted) {
+        const currentUrl = window.location.pathname;
+
+        // Global page fade-in animation - only on full boosted navigations if the URL changed
+        if (event.detail.boosted && currentUrl !== lastUrl) {
             const mainContent = document.getElementById('main-content');
             if (mainContent) {
                 mainContent.classList.remove('animate-fadeInUp');
@@ -29,6 +33,7 @@ document.addEventListener('DOMContentLoaded', () => {
                 mainContent.classList.add('animate-fadeInUp');
             }
             animateGridItems();
+            lastUrl = currentUrl;
         }
 
         // If the settled element is the posts-container or contains grid items