From e2feba41b9fd30abbc95ee83337f1da58e0879e3 Mon Sep 17 00:00:00 2001
From: Nariman Jelveh <nj@puter.com>
Date: Fri, 23 Oct 2026 14:34:41 -0700
Subject: [PATCH] perf(dashboard): lay out only the new row when an item is
 added to Files

Every item added to the open folder from elsewhere (another tab, an
upload, a move into it) restyled and re-truncated every row in the
listing, so a burst of adds was quadratic in the folder's size: 100 adds
into a 300-item folder took ~800ms of main-thread work. The added row now
takes the listing's column layout on its own (~130ms for the same burst).
---
 src/gui/src/UI/Dashboard/TabFiles.js | 24 ++++++++++++++++++++++--
 1 file changed, 22 insertions(+), 2 deletions(-)

diff --git a/src/gui/src/UI/Dashboard/TabFiles.js b/src/gui/src/UI/Dashboard/TabFiles.js
index 389b9976f..bfd42a418 100644
--- a/src/gui/src/UI/Dashboard/TabFiles.js
+++ b/src/gui/src/UI/Dashboard/TabFiles.js
@@ -265,8 +265,8 @@ const TabFiles = {
             // Insert at correct sorted position
             _this.insertAtSortedPosition($newRow, file);
 
-            // Apply column widths to match existing rows
-            _this.applyColumnWidths();
+            // Lay it out like the rows already there
+            _this.applyColumnWidthsToRow($newRow);
 
             // Highlight animation to indicate newly added item
             $newRow.addClass('item-newly-added');
@@ -1881,6 +1881,7 @@ const TabFiles = {
 
         const nameCol = nameWidth ? `${nameWidth}px` : 'auto';
         const gridTemplate = `24px ${nameCol} 4px ${sizeWidth}px 4px ${modifiedWidth}px 4px 20px`;
+        this.columnGridTemplate = gridTemplate;
 
         $filesTab.find('.header .columns').css('grid-template-columns', gridTemplate);
         $filesTab.find('.files.files-list-view .row').css('grid-template-columns', gridTemplate);
@@ -1888,6 +1889,25 @@ const TabFiles = {
         this.fitItemNames($filesTab.find('.files .row:not(.header) .item-name'));
     },
 
+    /**
+     * Lays out one added row like the rest of the listing. Restyling every
+     * row instead (applyColumnWidths) makes a burst of adds, such as a move
+     * into the folder, quadratic in the folder's size.
+     *
+     * @param {jQuery} $row
+     * @returns {void}
+     */
+    applyColumnWidthsToRow ($row) {
+        if ( ! this.columnGridTemplate ) {
+            this.applyColumnWidths();
+            return;
+        }
+        if ( $row.closest('.files').hasClass('files-list-view') ) {
+            $row.css('grid-template-columns', this.columnGridTemplate);
+        }
+        this.fitItemNames($row.find('.item-name'));
+    },
+
     /**
      * A resize starts from the widths on screen. Saved widths too wide for
      * the listing lay out at the defaults (see applyColumnWidths), and