Search: clear the previous result line while a new search loads, draw long lists in chunks, append the full list instead of redrawing, warm fewer thumbnails

frontend/views-core.js

@@ -405,8 +405,38 @@ function renderList() {
   }
   els.status.classList.add('hidden');
 
-  list.forEach((v, i) => els.cards.appendChild(renderCard(v, i, list)));
+  // Long lists (a deep search returns up to 200) are drawn in chunks: the first
+  // screenful at once, the rest on later frames, so a phone never freezes.
+  const token = (renderList._token = (renderList._token || 0) + 1);
+  const FIRST = 30, STEP = 40;
+  const draw = (from, to) => {
+    const frag = document.createDocumentFragment();
+    for (let i = from; i < Math.min(to, list.length); i++) frag.appendChild(renderCard(list[i], i, list));
+    els.cards.appendChild(frag);
+  };
+  draw(0, FIRST);
   markPlayingCard();
+  let at = FIRST;
+  const more = () => {
+    if (renderList._token !== token || at >= list.length) return;
+    draw(at, at + STEP); at += STEP; markPlayingCard();
+    (window.requestIdleCallback || ((f) => setTimeout(f, 30)))(more);
+  };
+  if (list.length > FIRST) (window.requestIdleCallback || ((f) => setTimeout(f, 30)))(more);
+}
+// Search only: the server's fuller list arrived and starts with the cards
+// already shown — add the new ones below instead of redrawing everything.
+function appendListCards(list, fromIndex) {
+  const token = renderList._token;
+  let at = fromIndex;
+  const step = () => {
+    if (renderList._token !== token || at >= list.length) return;
+    const frag = document.createDocumentFragment();
+    for (const end = Math.min(at + 40, list.length); at < end; at++) frag.appendChild(renderCard(list[at], at, list));
+    els.cards.appendChild(frag);
+    (window.requestIdleCallback || ((f) => setTimeout(f, 30)))(step);
+  };
+  step();
 }
 
 function addBrowseCta(empty, label) {