From 445f965c8ebf29f4ceb9fdfbb9bd03cbb77d9dee Mon Sep 17 00:00:00 2001
From: Horizontal42 <75383519+Horizontal42@users.noreply.github.com>
Date: Wed, 12 Aug 2026 22:07:34 +0300
Subject: [PATCH] perf: prevent layout thrashing on document drag (#86)

Swaps the order of DOM reads (getBoundingClientRect) and writes (classList.add) in the dragging onMove handler to prevent forced synchronous layouts.

Co-authored-by: google-labs-jules[bot] <161369871+google-labs-jules[bot]@users.noreply.github.com>
---
 src/main.ts | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/main.ts b/src/main.ts
index a8a7a45..8d3d343 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -112,13 +112,6 @@ function setupDocInteraction(el: HTMLElement, doc: DocMeta, list: HTMLElement, d
     const startY = e.clientY;
     let cachedItems: { el: HTMLElement, top: number, bottom: number }[] | null = null;
     const onMove = (ev: MouseEvent) => {
-      if (!dragging) {
-        if (Math.abs(ev.clientY - startY) < 4) return;
-        dragging = true;
-        suppressClick = true;
-        el.classList.add("dragging");
-        document.body.style.cursor = "grabbing";
-      }
       if (!cachedItems) {
         const domItems = [...list.querySelectorAll<HTMLElement>(".doc-item")];
         cachedItems = domItems.map((item) => {
@@ -126,6 +119,13 @@ function setupDocInteraction(el: HTMLElement, doc: DocMeta, list: HTMLElement, d
           return { el: item, top: rect.top, bottom: rect.bottom };
         });
       }
+      if (!dragging) {
+        if (Math.abs(ev.clientY - startY) < 4) return;
+        dragging = true;
+        suppressClick = true;
+        el.classList.add("dragging");
+        document.body.style.cursor = "grabbing";
+      }
       let over: HTMLElement | undefined;
       for (const item of cachedItems) {
         item.el.classList.remove("drag-over");