From e7a3a1088df829d3082ab847388e1826aa1d9dba Mon Sep 17 00:00:00 2001
From: vcheckzen <18008498+vcheckzen@users.noreply.github.com>
Date: Thu, 31 Oct 2024 05:27:19 +0800
Subject: [PATCH] feat: performance improvements for large lists

---
 front-end/index.html | 20 +++++++++-----------
 1 file changed, 9 insertions(+), 11 deletions(-)

diff --git a/front-end/index.html b/front-end/index.html
index 51a4df80..c1f4826c 100644
--- a/front-end/index.html
+++ b/front-end/index.html
@@ -951,7 +951,7 @@
             if (
               pageRef.skipToken /* conflicts with loading next page */ ||
               stat.renderedItems >= stat.children.length ||
-              Date.now() - stat.lastRenderedTs <= 800 /* 0.8s */
+              Date.now() - stat.lastRenderedTs <= 500 /* 0.5s */
             ) {
               return;
             }
@@ -970,7 +970,7 @@
         renderItems();
 
         function renderItems() {
-          const lastRenderedIndex = stat.renderedItems - 1;
+          const startIndex = stat.renderedItems;
 
           stat.lastRenderedTs = Date.now();
           stat.renderedItems += stat.batchSize;
@@ -981,20 +981,18 @@
           const fragment = document.createDocumentFragment();
           fragment.append(
             ...stat.children
-              .slice(0, stat.renderedItems)
+              .slice(startIndex, stat.renderedItems)
               .map((create) => create())
           );
-          listContainer.replaceChildren(fragment);
-          if (stat.renderedItems !== stat.batchSize) {
-            listContainer.querySelectorAll('.row')[
-              lastRenderedIndex
-            ].style.backgroundColor = '#f1f1f1';
+          if (startIndex === 0) {
+            listContainer.replaceChildren(fragment);
+          } else {
             stat.observer.disconnect();
+            listContainer.lastElementChild.style.backgroundColor = '#f1f1f1';
+            listContainer.appendChild(fragment);
           }
           if (stat.renderedItems < stat.children.length) {
-            const loadingMarker = document.createElement('div');
-            listContainer.appendChild(loadingMarker);
-            stat.observer.observe(loadingMarker);
+            stat.observer.observe(listContainer.lastElementChild);
           }
         }
       }