perf(downloads): start column moves immediately

Commit the local target order before persistence, limit FLIP measurements to columns that actually move, and remove the redundant row-wide grid preparation pass. Keep the animation-disabled path free of geometry reads and preserve serialized settings writes.

src/renderer/App.tsx

@@ -95,7 +95,7 @@ import {
   type StatisticsViewActions
 } from "./views/statistics/StatisticsView";
 import { buildDownloadsViewModel, formatRemainingDownloadBytes, getDownloadQueueTotalBytes, getDownloadSpeedBps, getPendingDownloadItemCount, getRemainingDownloadBytes, type DownloadDisplayMode, type DownloadSidebarFilter } from "./views/downloads/downloads-model";
-import { applyDownloadGridTemplate, downloadColumnDefinitions, type DownloadSortColumn } from "./views/downloads/DownloadsTable";
+import { downloadColumnDefinitions, type DownloadSortColumn } from "./views/downloads/DownloadsTable";
 import { DeleteConfirmationDialog } from "./views/downloads/DeleteConfirmationDialog";
 import { beginDownloadColumnDrag, clearDownloadColumnDrag, commitDownloadColumnDrag, createDownloadColumnOrderPersistence, DOWNLOAD_COLUMN_MOVE_DURATION_MS, updateDownloadColumnDrag, type DownloadColumnDragSession, type DownloadColumnOrderPersistence } from "./views/downloads/column-drag";
 import {
@@ -4917,11 +4917,11 @@ export function App(): ReactElement {
       suppressColumnSortRef.current = true;
       window.setTimeout(() => { suppressColumnSortRef.current = false; }, 0);
       const changed = next.join("|") !== session.measurements.map((measurement) => measurement.id).join("|");
-      if (changed) persistColumnOrder(next);
       const animationsEnabled = snapshot.settings.animatePackageDisclosure;
       columnDragAnimationsRef.current = commitDownloadColumnDrag(session, next, (order) => {
         if (changed) flushSync(() => setColumnOrder(order));
-      }, () => applyDownloadGridTemplate(session.root, next), animationsEnabled);
+      }, () => {}, animationsEnabled);
+      if (changed) persistColumnOrder(next);
       if (!animationsEnabled) {
         if (columnDragSessionRef.current === session) columnDragSessionRef.current = null;
         return;

src/renderer/views/downloads/DownloadsTable.tsx

@@ -44,13 +44,6 @@ export function downloadGridTemplateForOrder(columnOrder: readonly string[]): st
   return downloadGridTemplate(columnOrder.map((column) => downloadColumnDefinitions[column]?.width ?? "100px").join(" "));
 }
 
-export function applyDownloadGridTemplate(root: HTMLElement, columnOrder: readonly string[]): void {
-  const value = downloadGridTemplateForOrder(columnOrder);
-  root.querySelectorAll<HTMLElement>(".downloads-table-header, .downloads-package-row, .downloads-item-row").forEach((row) => {
-    row.style.gridTemplateColumns = value;
-  });
-}
-
 function isPackageRowDisclosureExcluded(target: EventTarget | null): boolean {
   const closest = (target as { closest?: (selector: string) => Element | null } | null)?.closest;
   return typeof closest === "function" && closest.call(target, PACKAGE_ROW_DISCLOSURE_EXCLUSION_SELECTOR) !== null;

src/renderer/views/downloads/column-drag.ts

@@ -124,12 +124,22 @@ export function commitDownloadColumnDrag(
   prepare: () => void = () => {},
   animationsEnabled = true
 ): Animation[] {
-  const elements = Array.from(session.root.querySelectorAll<HTMLElement>("[data-download-column]"));
+  if (!animationsEnabled) {
+    clearDownloadColumnDrag(session);
+    prepare();
+    commit(order);
+    return [];
+  }
+  const originalOrder = session.measurements.map((measurement) => measurement.id);
+  const movedIds = originalOrder.filter((id, index) => (
+    order[index] !== id || Math.abs(session.preview.settleOffsets[id] ?? 0) >= 0.5
+  ));
+  const selector = movedIds.map((id) => `[data-download-column="${id}"]`).join(", ");
+  const elements = selector ? Array.from(session.root.querySelectorAll<HTMLElement>(selector)) : [];
   const before = new Map(elements.map((element) => [element, element.getBoundingClientRect()]));
   clearDownloadColumnDrag(session);
   prepare();
   commit(order);
-  if (!animationsEnabled) return [];
   session.root.classList.add("is-column-drag-settling");
   const animations: Animation[] = [];
   for (const element of elements) {