autoload tweets in search

dimdenGD · Sep 3, 2022 · 3d5ce3c · 3d5ce3c
1 parent 50ca859
commit 3d5ce3c
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 13 deletions.
diff --git a/layouts/search/index.html b/layouts/search/index.html
@@ -49,7 +49,6 @@ <h1>Trends</h1>
             </div>
             <div class="cell" id="center-cell">
                 <div id="timeline"></div>
-                <div id="search-more" class="center-text">Load more</div>
             </div>
             <div class="cell" id="right-cell">
                 <div id="save-search" class="center-text">Save this search</div>

diff --git a/layouts/search/script.js b/layouts/search/script.js
@@ -12,7 +12,6 @@ let saved;
 // Util
 
 function updateSubpage() {
-    document.getElementById('search-more').hidden = false;
     let params = Object.fromEntries(new URLSearchParams(location.search + location.hash));
     searchParams = params || {};
     searchSettings = {};
@@ -863,9 +862,6 @@ async function renderTrends() {
 async function renderSearch(c) {
     updateSavedButton();
     let searchDiv = document.getElementById('timeline');
-    let searchMore = document.getElementById('search-more');
-    searchMore.hidden = false;
-    searchMore.innerText = 'Loading...';
     let search;
     let currentCursor = cursor;
     try {
@@ -893,8 +889,6 @@ async function renderSearch(c) {
     } catch(e) {
         console.error(e);
         cursor = undefined;
-        searchMore.hidden = true;
-        searchMore.innerText = 'Load more';
         return document.getElementById('loading-box').hidden = true;
     }
     if(!c) {
@@ -914,15 +908,13 @@ async function renderSearch(c) {
             linkColors[linkData[i].username] = linkData[i].color;
         }
     }
-    searchMore.innerText = 'Load more';
     if(search.length === 0) {
         if(!currentCursor) {
             searchDiv.innerHTML = `<div class="no-results">
                 <br><br>
                 No results found. Try changing something on left?<br><br>
                 <button class="nice-button">Try again</button>
             </div>`;
-            searchMore.hidden = true;
             cursor = undefined;
             let button = searchDiv.querySelector('button');
             button.addEventListener('click', () => {
@@ -1021,6 +1013,7 @@ async function updateSavedButton() {
 }
 let lastTweetDate = 0;
 let activeTweet;
+let loadingNewTweets = false;
 
 setTimeout(() => {
     if(!document.getElementById('wtf-refresh')) {
@@ -1030,10 +1023,6 @@ setTimeout(() => {
     document.getElementById('wtf-refresh').addEventListener('click', async () => {
         renderDiscovery(false);
     });
-    document.getElementById('search-more').addEventListener('click', async () => {
-        if(!cursor) return;
-        renderSearch(cursor);
-    });
     window.addEventListener("popstate", async () => {
         cursor = undefined;
         updateSubpage();
@@ -1054,6 +1043,17 @@ setTimeout(() => {
                 activeTweet.classList.add('tweet-active');
             }
         }
+        // load more tweets
+        if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight - 1000) {
+            if (loadingNewTweets || !cursor) return;
+            loadingNewTweets = true;
+            await renderSearch(cursor);
+            setTimeout(() => {
+                setTimeout(() => {
+                    loadingNewTweets = false;
+                });
+            }, 200);
+        }
     });
 
     // tweet hotkeys