[TASK] Improve icon selector performance in backend (#1392)

The core select icon wizard blocks the editing form
until all images are loaded. This is a problem when
you display a lot of icons in context of a selector.

This is a workaround, and adapts the current selector
to render all icons inline. It should become a custom
render type at some point.

Classes/Form/FieldWizard/IconWizard.php

@@ -0,0 +1,82 @@
+<?php
+
+declare(strict_types=1);
+
+/*
+ * This file is part of the package bk2k/bootstrap-package.
+ *
+ * For the full copyright and license information, please read the
+ * LICENSE file that was distributed with this source code.
+ */
+
+namespace BK2K\BootstrapPackage\Form\FieldWizard;
+
+use BK2K\BootstrapPackage\Service\IconService;
+use TYPO3\CMS\Backend\Form\AbstractNode;
+use TYPO3\CMS\Backend\Form\Utility\FormEngineUtility;
+use TYPO3\CMS\Core\Utility\GeneralUtility;
+
+class IconWizard extends AbstractNode
+{
+    public function render(): array
+    {
+        $selectIcons = [];
+        $result = $this->initializeResultArray();
+        $parameterArray = $this->data['parameterArray'];
+
+        $iconSetField = $parameterArray['fieldConf']['config']['itemsProcConfig']['iconSetField'] ?? 'icon_set';
+        $iconProviderIdentifier = $this->data['databaseRow'][$iconSetField][0] ?? '';
+        $iconProvider = GeneralUtility::makeInstance(IconService::class)->getIconProviderForIdentifier($iconProviderIdentifier);
+        $iconList = $iconProvider !== null ? $iconProvider->getIconList() : null;
+
+        $selectItems = $parameterArray['fieldConf']['config']['items'];
+        $selectItemCounter = 0;
+        foreach ($selectItems as $item) {
+            if ($item['value'] === '--div--') {
+                continue;
+            }
+
+            $icon = null;
+            if ($iconList !== null) {
+                $iconSetIcon = $iconList->getIcon((string) $item['value']);
+                if ($iconSetIcon !== null) {
+                    $iconSetIcon->setHeight(32);
+                    $iconSetIcon->setWidth(32);
+                    $icon = $iconSetIcon->render();
+                }
+            }
+
+            if ($icon === null) {
+                $icon = isset($item['icon']) && trim($item['icon']) !== '' ? FormEngineUtility::getIconHtml($item['icon'], $item['label'], $item['label']) : '';
+            }
+
+            if ($icon !== '') {
+                $fieldValue = $this->data['databaseRow'][$this->data['fieldName']];
+                $selectIcons[] = [
+                    'title' => $item['label'],
+                    'active' => ($fieldValue[0] ?? false) === (string)($item['value'] ?? ''),
+                    'icon' => $icon,
+                    'index' => $selectItemCounter,
+                ];
+            }
+            $selectItemCounter++;
+        }
+
+        $html = [];
+        if (count($selectIcons) > 0) {
+            $html[] = '<div class="t3js-forms-select-single-icons form-wizard-icon-list">';
+            foreach ($selectIcons as $i => $selectIcon) {
+                $active = $selectIcon['active'] ? ' active' : '';
+                $html[] = '<div class="form-wizard-icon-list-item">';
+                $html[] =   '<a class="' . $active . '" href="#" title="' . htmlspecialchars($selectIcon['title'], ENT_COMPAT, 'UTF-8', false) . '" data-select-index="' . htmlspecialchars((string)$selectIcon['index']) . '">';
+                $html[] =       $selectIcon['icon'];
+                $html[] =   '</a>';
+                $html[] = '</div>';
+            }
+            $html[] = '</div>';
+        }
+
+        $result['html'] = implode(LF, $html);
+        return $result;
+    }
+}

Classes/Service/IconService.php

@@ -40,7 +40,7 @@ public function getIconItems(array &$configuration): void
         $iconItems[] = [
             'LLL:EXT:bootstrap_package/Resources/Private/Language/Backend.xlf:option.none',
             0,
-            'EXT:bootstrap_package/Resources/Public/Images/Icons/none.jpg'
+            'EXT:bootstrap_package/Resources/Public/Images/Icons/none.svg'
         ];
 
         $iconSetField = $configuration['config']['itemsProcConfig']['iconSetField'] ?? 'icon_set';

Configuration/TCA/Overrides/100_pages.php

@@ -69,6 +69,7 @@
                 ],
                 'fieldWizard' => [
                     'selectIcons' => [
+                        'renderType' => 'iconWizard',
                         'disabled' => false,
                     ],
                 ],

Configuration/TCA/Overrides/225_content_element_texticon.php

@@ -106,6 +106,7 @@
                 'itemsProcFunc' => 'BK2K\BootstrapPackage\Service\IconService->getIconItems',
                 'fieldWizard' => [
                     'selectIcons' => [
+                        'renderType' => 'iconWizard',
                         'disabled' => false,
                     ],
                 ],

Configuration/TCA/tx_bootstrappackage_card_group_item.php

@@ -334,6 +334,7 @@
                 ],
                 'fieldWizard' => [
                     'selectIcons' => [
+                        'renderType' => 'iconWizard',
                         'disabled' => false,
                     ],
                 ],

Configuration/TCA/tx_bootstrappackage_icon_group_item.php

@@ -257,6 +257,7 @@
                 ],
                 'fieldWizard' => [
                     'selectIcons' => [
+                        'renderType' => 'iconWizard',
                         'disabled' => false,
                     ],
                 ],

Configuration/TCA/tx_bootstrappackage_timeline_item.php

@@ -240,6 +240,7 @@
                 ],
                 'fieldWizard' => [
                     'selectIcons' => [
+                        'renderType' => 'iconWizard',
                         'disabled' => false,
                     ],
                 ],

ext_localconf.php

@@ -186,3 +186,10 @@
         ['source' => 'EXT:bootstrap_package/Resources/Public/Icons/ContentElements/' . $icon . '.svg']
     );
 }
+
+// Register "icon" wizard
+$GLOBALS['TYPO3_CONF_VARS']['SYS']['formEngine']['nodeRegistry'][1687516916] = [
+    'nodeName' => 'iconWizard',
+    'priority' => 40,
+    'class' => \BK2K\BootstrapPackage\Form\FieldWizard\IconWizard::class
+];