Update static/js/script.js

static/js/script.js

@@ -28,6 +28,13 @@ document.addEventListener('DOMContentLoaded', function () {
     const resultsSection = document.querySelector('[data-section="results"]');
     console.log('Results section rendered:', !!resultsSection);
 
+    // Debug search results section
+    const searchResultsSection = document.querySelector('[data-section="search_results"]');
+    console.log('Search results section found:', {
+        present: !!searchResultsSection,
+        resultsCount: searchResultsSection?.getAttribute('data-results-count') || 0
+    });
+
     // Handle Translate Form Submission
     if (translateForm) {
         translateForm.addEventListener('submit', function (e) {
@@ -40,12 +47,13 @@ document.addEventListener('DOMContentLoaded', function () {
                 return;
             }
             if (loading1) {
+                console.log('Showing translate spinner');
                 loading1.classList.remove('d-none');
                 loading1.style.opacity = '0';
                 loading1.animate([
-                    { opacity: 0, transform: 'translateY(10px)' },
+                    { opacity: 0, transform: 'translateY(20px)' },
                     { opacity: 1, transform: 'translateY(0)' }
-                ], { duration: 300, easing: 'ease-in-out' });
+                ], { duration: 500, easing: 'ease-in-out', fill: 'forwards' });
                 translateBtn.disabled = true;
                 translateBtn.style.transform = 'scale(0.95)';
             }
@@ -65,12 +73,13 @@ document.addEventListener('DOMContentLoaded', function () {
                 return;
             }
             if (loading2) {
+                console.log('Showing crawl spinner');
                 loading2.classList.remove('d-none');
                 loading2.style.opacity = '0';
                 loading2.animate([
-                    { opacity: 0, transform: 'translateY(10px)' },
+                    { opacity: 0, transform: 'translateY(20px)' },
                     { opacity: 1, transform: 'translateY(0)' }
-                ], { duration: 300, easing: 'ease-in-out' });
+                ], { duration: 500, easing: 'ease-in-out', fill: 'forwards' });
                 crawlBtn.disabled = true;
                 crawlBtn.style.transform = 'scale(0.95)';
             }
@@ -90,12 +99,13 @@ document.addEventListener('DOMContentLoaded', function () {
                 alert('Please enter a search keyword.');
             } else {
                 if (loadingSearch) {
+                    console.log('Showing search spinner');
                     loadingSearch.classList.remove('d-none');
                     loadingSearch.style.opacity = '0';
                     loadingSearch.animate([
-                        { opacity: 0, transform: 'translateY(10px)' },
+                        { opacity: 0, transform: 'translateY(20px)' },
                         { opacity: 1, transform: 'translateY(0)' }
-                    ], { duration: 300, easing: 'ease-in-out' });
+                    ], { duration: 500, easing: 'ease-in-out', fill: 'forwards' });
                 }
             }
         });
@@ -106,7 +116,7 @@ document.addEventListener('DOMContentLoaded', function () {
     // Highlight search keywords and debug results
     const highlightElements = document.querySelectorAll('.search-result');
     console.log('Found search result elements:', highlightElements.length);
-    highlightElements.forEach(function (element) {
+    highlightElements.forEach(function (element, index) {
         const keywordInput = element.querySelector('.highlight-text')?.getAttribute('data-keyword');
         if (keywordInput) {
             const keywords = keywordInput.toLowerCase().split(/\s+/);
@@ -119,9 +129,9 @@ document.addEventListener('DOMContentLoaded', function () {
             console.log('Highlighted keywords:', keywords, 'in element:', element.id);
             element.style.opacity = '0';
             element.animate([
-                { opacity: 0, transform: 'translateX(-10px)' },
+                { opacity: 0, transform: 'translateX(-20px)' },
                 { opacity: 1, transform: 'translateX(0)' }
-            ], { duration: 500, easing: 'ease-out', delay: 100 });
+            ], { duration: 500, easing: 'ease-out', fill: 'forwards', delay: index * 100 });
         } else {
             console.warn('No keyword found for element:', element.id);
         }