PagesTree UI perfomance issues

[bob-tm]

• OctoberCMS Build: 4.3
• RainLab Pages Plugin Version: 2.0.0
• PHP Version:

Description:

I have a lot of static pages (2k+). After switching to Vue, backend pages tree is extremely slow. The problem in js code and DOM model updating.

I apply two patches that helps a lot

1. By default display every node collapsed. Maybe you can add this option to backend?
   currently I patch
   rainlab\pages\widgets\pagelist\partials_treebranch.htm
   with such code

    <li
        class="<?= $pageObj->subpages ? 'has-subitems' : null ?>"
        data-status="<?= $searchMode ? 'expanded' : (!$pageObj->subpages ? 'expanded' : 'collapsed') ?>"
        data-group-id="<?= e($fileName) ?>"
        data-item-path="<?= e($fileName) ?>"
        <?php if ($searchMode): ?>data-no-drag-mode<?php endif ?>
        data-id="<?= e($dataId) ?>"
    >

2. plugins\rainlab\pages\assets\js\october.treeview.js
   AI says that your way is ineffective and suggest this version of code witch should be 20x faster on large amount of items. Seems like it works, but i test just basic loading.

	TreeView.prototype.createItemControls = function() {
		var lis = this.$el[0].querySelectorAll('li');
		var len = lis.length;

		for (var i = 0; i < len; i++) {
			var li = lis[i];
			var container = li.children[0]; 

			if (!container || container.tagName !== 'DIV' || container.querySelector('.expand')) {
				continue;
			}

			var isNoDrag = li.hasAttribute('data-no-drag-mode');
			var dragTitle = isNoDrag ? ' title="Dragging is disabled when the Search is active"' : '';
			
			var hasDrag = container.querySelector('.drag-handle');
			var dragHtml = hasDrag ? '' : '<span class="drag-handle"' + dragTitle + '>Drag</span>';

			container.insertAdjacentHTML('afterbegin', '<span class="expand">Expand</span>');
			container.insertAdjacentHTML('beforeend', dragHtml + '<span class="borders"></span>');
		}
	};

Steps To Reproduce:

Create 5 groups by 500 pages :)