From 97fd34150f50e5e82bfdd1698ed9fb489a5126e2 Mon Sep 17 00:00:00 2001
From: Nick O'Leary <nick.oleary@gmail.com>
Date: Wed, 10 Jun 2020 00:42:11 +0100
Subject: [PATCH] EditableList/TreeList - defer adding elements to DOM

Whenever a DOM element is modified, it causes the browser to re-examine
the whole hierarchy around the element to see if anything needs to change.

This can cause a lot of extra work if an element is added to the DOM and
then a lot of updates are applied to the element.

It is much better to get the element as close to its final state as
possible *before* adding it to the DOM.
---
 .../src/js/ui/common/editableList.js          | 44 +++++++++----------
 .../src/js/ui/common/treeList.js              |  7 ++-
 2 files changed, 27 insertions(+), 24 deletions(-)

diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/common/editableList.js b/packages/node_modules/@node-red/editor-client/src/js/ui/common/editableList.js
index 962d87081..7d413319d 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/common/editableList.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/common/editableList.js
@@ -259,28 +259,6 @@
             var that = this;
             data = data || {};
             var li = $('<li>');
-            var added = false;
-            if (this.activeSort) {
-                var items = this.items();
-                var skip = false;
-                items.each(function(i,el) {
-                    if (added) { return }
-                    var itemData = el.data('data');
-                    if (that.activeSort(data,itemData) < 0) {
-                         li.insertBefore(el.closest("li"));
-                         added = true;
-                    }
-                });
-            }
-            if (!added) {
-                if (index <= 0) {
-                    li.prependTo(this.element);
-                } else if (index > that.element.children().length-1) {
-                    li.appendTo(this.element);
-                } else {
-                    li.insertBefore(this.element.children().eq(index));
-                }
-            }
             var row = $('<div/>').addClass("red-ui-editableList-item-content").appendTo(li);
             row.data('data',data);
             if (this.options.sortable === true) {
@@ -303,6 +281,28 @@
                     });
                 });
             }
+            var added = false;
+            if (this.activeSort) {
+                var items = this.items();
+                var skip = false;
+                items.each(function(i,el) {
+                    if (added) { return }
+                    var itemData = el.data('data');
+                    if (that.activeSort(data,itemData) < 0) {
+                         li.insertBefore(el.closest("li"));
+                         added = true;
+                    }
+                });
+            }
+            if (!added) {
+                if (index <= 0) {
+                    li.prependTo(this.element);
+                } else if (index > that.element.children().length-1) {
+                    li.appendTo(this.element);
+                } else {
+                    li.insertBefore(this.element.children().eq(index));
+                }
+            }
             if (this.options.addItem) {
                 var index = that.element.children().length-1;
                 // setTimeout(function() {
diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/common/treeList.js b/packages/node_modules/@node-red/editor-client/src/js/ui/common/treeList.js
index afed63a5a..77a301545 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/common/treeList.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/common/treeList.js
@@ -501,7 +501,8 @@
 
             item.treeList.parentList = parentList;
 
-            var label = $("<div>",{class:"red-ui-treeList-label"}).appendTo(container);
+            var label = $("<div>",{class:"red-ui-treeList-label"});
+            label.appendTo(container);
             item.treeList.label = label;
             if (item.class) {
                 label.addClass(item.class);
@@ -592,7 +593,7 @@
             }
 
             if (item.checkbox) {
-                var selectWrapper = $('<span class="red-ui-treeList-icon"></span>').appendTo(label);
+                var selectWrapper = $('<span class="red-ui-treeList-icon"></span>');
                 var cb = $('<input class="red-ui-treeList-checkbox" type="checkbox">').prop('checked',item.selected).appendTo(selectWrapper);
                 cb.on('click', function(e) {
                     e.stopPropagation();
@@ -618,6 +619,7 @@
                         cb.trigger("click");
                     }
                 }
+                selectWrapper.appendTo(label)
             } else {
                 label.on("click", function(e) {
                     if (!that.options.multi) {
@@ -680,6 +682,7 @@
                     item.treeList.expand();
                 }
             }
+            // label.appendTo(container);
         },
         empty: function() {
             this._topList.editableList('empty');