improved tweet load speed

layouts/home/script.js

@@ -1116,7 +1116,10 @@ async function renderTrends() {
 let loadingNewTweets = false;
 let lastTweetDate = 0;
 let activeTweet;
+let tweetsToLoad = {};
+let lastScroll = Date.now();
 document.addEventListener('scroll', async () => {
+    lastScroll = Date.now();
     // find active tweet by scroll amount
     if(Date.now() - lastTweetDate > 50) {
         lastTweetDate = Date.now();
@@ -1167,6 +1170,24 @@ document.addEventListener('scroll', async () => {
         }, 250);
     }
 }, { passive: true });
+document.addEventListener('mousemove', e => {
+    if(Date.now() - lastScroll > 10) {
+        let t = e.target;
+        if(t.className.includes('tweet ') || t.className === 'tweet-interact' || t.className === 'tweet-body') {
+            if(t.className === 'tweet-interact') t = t.parentElement.parentElement;
+            else if(t.className === 'tweet-body') t = t.parentElement;
+            let id = t.className.split('id-')[1].split(' ')[0];
+            if(!tweetsToLoad[id]) tweetsToLoad[id] = 1;
+            else tweetsToLoad[id]++;
+            if(tweetsToLoad[id] === 15) {
+                API.getReplies(id);
+                API.getTweetLikers(id);
+                t.classList.add('tweet-preload');
+                console.log(`Preloading ${id}`);
+            }
+        }
+    }
+});
 
 document.addEventListener('clearActiveTweet', () => {
     if(activeTweet) {

layouts/home/style.css

@@ -254,6 +254,9 @@ span.tweet-body-text {
     font-size: 47px;
     margin-top: -14px;
 }
+.tweet-preload .tweet-interact::after {
+    color: #1df2e7;
+}
 
 .tweet-body-quote {
     background-color: var(--background-color);

layouts/profile/script.js

@@ -1798,7 +1798,10 @@ let banner = document.getElementById('profile-banner');
 let loadingNewTweets = false;
 let lastTweetDate = 0;
 let activeTweet;
+let tweetsToLoad = {};
+let lastScroll = Date.now();
 document.addEventListener('scroll', async () => {
+    lastScroll = Date.now();
     // find active tweet by scroll amount
     if(Date.now() - lastTweetDate > 50) {
         lastTweetDate = Date.now();
@@ -1851,6 +1854,24 @@ document.addEventListener('scroll', async () => {
         }, 200);
     }
 }, { passive: true });
+document.addEventListener('mousemove', e => {
+    if(Date.now() - lastScroll > 10) {
+        let t = e.target;
+        if(t.className.includes('tweet ') || t.className === 'tweet-interact' || t.className === 'tweet-body') {
+            if(t.className === 'tweet-interact') t = t.parentElement.parentElement;
+            else if(t.className === 'tweet-body') t = t.parentElement;
+            let id = t.className.split('id-')[1].split(' ')[0];
+            if(!tweetsToLoad[id]) tweetsToLoad[id] = 1;
+            else tweetsToLoad[id]++;
+            if(tweetsToLoad[id] === 15) {
+                API.getReplies(id);
+                API.getTweetLikers(id);
+                t.classList.add('tweet-preload');
+                console.log(`Preloading ${id}`);
+            }
+        }
+    }
+});
 
 document.addEventListener('clearActiveTweet', () => {
     if(activeTweet) {

layouts/profile/style.css

@@ -177,6 +177,9 @@ body {
     font-size: 47px;
     margin-top: -14px;
 }
+.tweet-preload .tweet-interact::after {
+    color: #1df2e7;
+}
 
 .tweet-header-name,
 .tweet-header-name-quote {

layouts/tweet/script.js

@@ -64,16 +64,19 @@ function updateUserData() {
 }
 async function updateReplies(id, c) {
     if(!c) document.getElementById('timeline').innerHTML = '';
-    let tl;
+    let tl, tweetLikers;
     try {
-        let [tlData, s] = await Promise.allSettled([API.getReplies(id, c), API.getSettings()]);
+        let [tlData, s, tweetLikersData] = await Promise.allSettled([API.getReplies(id, c), API.getSettings(), API.getTweetLikers(id)]);
         if(!tlData.value) {
             cursor = undefined;
             return console.error(tlData.reason);
         }
         tl = tlData.value;
         settings = s.value;
+        tweetLikers = tweetLikersData.value;
+        loadingNewTweets = false;
     } catch(e) {
+        loadingNewTweets = false;
         return cursor = undefined;
     }
 
@@ -101,7 +104,6 @@ async function updateReplies(id, c) {
     for(let i in tl.list) {
         let t = tl.list[i];
         if(t.type === 'mainTweet') {
-            let tweetLikers = await API.getTweetLikers(t.data.id_str);
             mainTweetLikers = tweetLikers.list;
             likeCursor = tweetLikers.cursor;
             if(i === 0) {
@@ -1624,11 +1626,6 @@ document.addEventListener('scroll', async () => {
         let path = location.pathname;
         if(path.endsWith('/')) path = path.slice(0, -1);
         updateReplies(path.split('/').slice(-1)[0], cursor);
-        setTimeout(() => {
-            setTimeout(() => {
-                loadingNewTweets = false;
-            });
-        }, 200);
     }
 }, { passive: true });
 

layouts/tweet/style.css

@@ -680,22 +680,23 @@ a:hover,
 
 .tweet-self-thread-line {
     background-color: var(--border);
-    height: 52px;
+    height: 32px;
+    margin-top: 21px;
     margin-left: -34px;
     position: absolute;
     width: 2px;
-    z-index: 1
+    z-index: 1;
 }
 
 .tweet-self-thread-line-dots {
     border: 2px var(--background-color) solid;
     display: unset;
     height: 2px;
     margin-left: -41px;
-    margin-top: 2px;
+    margin-top: 23px;
     position: absolute;
     width: 12px;
-    z-index: 2
+    z-index: 2;
 }
 
 .tweet:hover .tweet-self-thread-line-dots {

manifest.json

@@ -1,7 +1,7 @@
 {
   "name": "Old Twitter Layout (2022)",
   "description": "A new extension that returns old Twitter's look.",
-  "version": "1.4.6",
+  "version": "1.4.7",
   "manifest_version": 3,
   "homepage_url": "https://github.com/dimdenGD/OldTwitter",
   "background": {