perf(search): render result sets in one batched pass

displaySearchResults inserted up to 100 results one at a time via
addItem({ scroll: true, highlight: true }) — each insert ran two DOM
scans (duplicate guard + row lookup), a smooth scrollIntoView and a
highlight pulse, so every live-search keystroke triggered ~100 competing
smooth-scrolls and O(n²) container scans.

Add filesView.renderItems(): a single component.render() pass (one
DocumentFragment, zero per-item scans/scrolls). addItem keeps the
scroll/highlight affordances for its documented purpose — optimistic
single-item inserts after upload/create.

https://claude.ai/code/session_01Dp3oWon5GBMVn4j3QXZdgx
This commit is contained in:
Claude
2026-06-10 09:01:42 +00:00
parent 3c64354a0d
commit ca698f73d1
2 changed files with 21 additions and 11 deletions
+5 -10
View File
@@ -7,7 +7,7 @@
* displays the enriched results returned by the server.
*/
import { addItem as filesViewAddItem, loadFiles } from '../../app/filesView.js';
import { loadFiles, renderItems } from '../../app/filesView.js';
import { app } from '../../app/state.js';
import { ui } from '../../app/ui.js';
import { getAuthHeaders } from './fileOperations.js';
@@ -198,15 +198,10 @@ const search = {
return;
}
// Render folders (server-provided enriched data)
results.folders.forEach((folder) => {
filesViewAddItem(folder);
});
// Render files (server-provided enriched data)
results.files.forEach((file) => {
filesViewAddItem(file);
});
// Render the whole result set (server-provided enriched data) in one
// batched pass — per-item inserts would trigger a DOM scan, a smooth
// scroll and a highlight pulse for each of up to 100 rows.
renderItems([...results.folders, ...results.files]);
},
/**