added cool loading animation for dynamic scrolling

static/css/style-loadingindicator.css

@@ -0,0 +1,60 @@
+.message-bottom-right {
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.3s ease-in-out;
+    align-items: center;
+    justify-content: center;
+    position: fixed;
+    bottom: 20px;
+    right: 20px;
+    background-color: var(--search-bg);
+    color: var(--text-color);
+    padding: 10px;
+    border-radius: 5px;
+    z-index: 1000;
+    text-align: center;
+    flex-direction: column;
+    border: 1px solid var(--border);
+    box-shadow: 0 0 10px var(--box-shadow);
+}
+
+.message-bottom-right.visible {
+    opacity: 1;
+    pointer-events: auto;
+}
+
+@keyframes bounce {
+    0%, 100% {
+        transform: translateY(0);
+    }
+    30% {
+        transform: translateY(-10px);
+    }
+    50% {
+        transform: translateY(0);
+    }
+    70% {
+        transform: translateY(-5px);
+    }
+    85% {
+        transform: translateY(0);
+    }
+    95% {
+        transform: translateY(-2px);
+    }
+}
+
+.dot {
+    display: inline-block;
+    animation: bounce 1.5s infinite;
+}
+
+.dot:nth-child(2) {
+    animation-delay: 0.1s;
+}
+.dot:nth-child(3) {
+    animation-delay: 0.2s;
+}
+.dot:nth-child(4) {
+    animation-delay: 0.3s;
+}

static/css/style.css

@@ -1310,24 +1310,6 @@ p {
     text-shadow: 1px 1px 2px var(--border) !important; /* Adjust text shadow */
 }
 
-.message-bottom-left {
-        display: none;
-        align-items: center;
-        justify-content: center;
-        position: fixed;
-        bottom: 20px;
-        right: 20px;
-        background-color: var(--search-bg);
-        color: var(--text-color);
-        padding: 10px;
-        border-radius: 5px;
-        z-index: 1000;
-        text-align: center;
-        flex-direction: column;
-        border: 1px solid var(--border);
-        box-shadow: 0 0 10px var(--box-shadow);
-}
-
 body, h1, p, a, input, button {
     color: var(--text-color); /* Applies the text color based on theme */
     background-color: var(--background-color); /* Applies the background color based on theme */

static/js/dynamicscrolling.js

@@ -8,16 +8,24 @@ document.addEventListener("DOMContentLoaded", function() {
     let searchType = templateData.getAttribute('data-type') || 'text';  // Default to 'text' if not provided
     let loading = false;
     let hasMoreResults = true;
-    const loadingIndicator = document.getElementById('message-bottom-left');
+    const loadingIndicator = document.getElementById('message-bottom-right');
     let loadingTimeout;
 
+    function showLoadingMessage() {
+        loadingIndicator.classList.add('visible');
+    }
+    
+    function hideLoadingMessage() {
+        loadingIndicator.classList.remove('visible');
+    }
+
     function loadResults(newPage) {
         if (loading || !hasMoreResults) return;
         loading = true;
 
         // Show loading indicator if taking more than 150ms
         loadingTimeout = setTimeout(() => {
-            loadingIndicator.style.display = 'flex';
+            showLoadingMessage()
         }, 150);
 
         fetch(`/search?q=${encodeURIComponent(query)}&t=${encodeURIComponent(searchType)}&p=${newPage}`)
@@ -29,7 +37,7 @@ document.addEventListener("DOMContentLoaded", function() {
             })
             .then(data => {
                 clearTimeout(loadingTimeout);
-                loadingIndicator.style.display = 'none';
+                hideLoadingMessage()
                 const parser = new DOMParser();
                 const doc = parser.parseFromString(data, 'text/html');
                 const newResultsHTML = doc.getElementById('results').innerHTML;
@@ -55,7 +63,7 @@ document.addEventListener("DOMContentLoaded", function() {
             })
             .catch(error => {
                 clearTimeout(loadingTimeout);
-                loadingIndicator.style.display = 'none';
+                hideLoadingMessage()
                 console.error('Error loading results:', error);
                 hasMoreResults = false;
                 loading = false;

static/js/dynamicscrollingimages.js

@@ -37,8 +37,7 @@
     // Rest of your existing code with minor additions
     const imageStatusInterval = 500;
     const scrollThreshold = 500;
-    const loadingIndicator = document.getElementById('message-bottom-left');
-    let loadingTimer;
+    const loadingIndicator = document.getElementById('message-bottom-right');    let loadingTimer;
     let isFetching = false;
     let page = parseInt(document.getElementById('template-data').getAttribute('data-page')) || 1;
     let query = document.getElementById('template-data').getAttribute('data-query');
@@ -49,6 +48,14 @@
     let imageIds = [];
     let imageStatusTimer;
 
+    function showLoadingMessage() {
+        loadingIndicator.classList.add('visible');
+    }
+    
+    function hideLoadingMessage() {
+        loadingIndicator.classList.remove('visible');
+    }
+
     function ensureScrollable() {
         if (noMoreImages) return;
         if (document.body.scrollHeight <= window.innerHeight) {
@@ -59,7 +66,7 @@
     function fetchNextPage() {
         if (isFetching || noMoreImages) return;
         loadingTimer = setTimeout(() => {
-            loadingIndicator.style.display = 'flex';
+            showLoadingMessage();
         }, 150);
         isFetching = true;
         page += 1;
@@ -68,7 +75,7 @@
             .then(response => response.text())
             .then(html => {
                 clearTimeout(loadingTimer);
-                loadingIndicator.style.display = 'none';
+                hideLoadingMessage();
 
                 let tempDiv = document.createElement('div');
                 tempDiv.innerHTML = html;
@@ -105,7 +112,7 @@
             })
             .catch(error => {
                 clearTimeout(loadingTimer);
-                loadingIndicator.style.display = 'none';
+                hideLoadingMessage();
                 console.error('Fetch error:', error);
                 isFetching = false;
             });