From 96d740eba28af00a62c99320571b1fe4db2cbd7b Mon Sep 17 00:00:00 2001 From: LucasC Date: Wed, 2 Oct 2024 17:36:50 +0200 Subject: [PATCH 01/14] XWIKI-22540: Slow loading time when changing the icons theme to Silk in the Icon picker * Added a flag on the data_icons action to only retrieve metadata when necessary. This shaves off half of the time for the request and reduces significantly the size of the payload --- .../src/main/webjar/xwiki-icon/iconService.js | 2 +- .../src/main/resources/IconThemesCode/IconPicker.xml | 4 +++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/xwiki-platform-core/xwiki-platform-ckeditor/xwiki-platform-ckeditor-plugins/src/main/webjar/xwiki-icon/iconService.js b/xwiki-platform-core/xwiki-platform-ckeditor/xwiki-platform-ckeditor-plugins/src/main/webjar/xwiki-icon/iconService.js index a9cf0a449d0c..e50571ee3da8 100644 --- a/xwiki-platform-core/xwiki-platform-ckeditor/xwiki-platform-ckeditor-plugins/src/main/webjar/xwiki-icon/iconService.js +++ b/xwiki-platform-core/xwiki-platform-ckeditor/xwiki-platform-ckeditor-plugins/src/main/webjar/xwiki-icon/iconService.js @@ -55,7 +55,7 @@ define('xwiki-iconService', [ return; } - $.getJSON(getResourceURL('data_icons', {iconTheme}), function (dataIcons) { + $.getJSON(getResourceURL('data_icons', {iconTheme, 'metadata': 'true'}), function (dataIcons) { cachedIcons[iconTheme] = dataIcons; resolve(dataIcons); }).fail(reject); diff --git a/xwiki-platform-core/xwiki-platform-icon/xwiki-platform-icon-ui/src/main/resources/IconThemesCode/IconPicker.xml b/xwiki-platform-core/xwiki-platform-icon/xwiki-platform-icon-ui/src/main/resources/IconThemesCode/IconPicker.xml index d536bbcc6660..4dc7d9a78ae0 100644 --- a/xwiki-platform-core/xwiki-platform-icon/xwiki-platform-icon-ui/src/main/resources/IconThemesCode/IconPicker.xml +++ b/xwiki-platform-core/xwiki-platform-icon/xwiki-platform-icon-ui/src/main/resources/IconThemesCode/IconPicker.xml @@ -56,7 +56,9 @@ #set($icon = {}) #set($discard = $icon.put('name', $xwikiIcon)) #set($discard = $icon.put('render', $services.icon.renderHTML($xwikiIcon, $iconTheme))) - #set($discard = $icon.put('metadata', $services.icon.getMetaData($xwikiIcon, $iconTheme))) + #if($request.metadata == 'true') + #set($discard = $icon.put('metadata', $services.icon.getMetaData($xwikiIcon, $iconTheme))) + #end #set($discard = $icons.add($icon)) #end #jsonResponse($icons) From 2392ffa0d24160943979ba7ce71b075b7e92d49e Mon Sep 17 00:00:00 2001 From: LucasC Date: Thu, 3 Oct 2024 13:30:05 +0200 Subject: [PATCH 02/14] XWIKI-22540: Slow loading time when changing the icons theme to Silk in the Icon picker * Refactored the IconPicker javascript to improve readability --- .../resources/IconThemesCode/IconPicker.xml | 19 ++++++++++--------- 1 file changed, 10 insertions(+), 9 deletions(-) diff --git a/xwiki-platform-core/xwiki-platform-icon/xwiki-platform-icon-ui/src/main/resources/IconThemesCode/IconPicker.xml b/xwiki-platform-core/xwiki-platform-icon/xwiki-platform-icon-ui/src/main/resources/IconThemesCode/IconPicker.xml index 4dc7d9a78ae0..2a90e550173c 100644 --- a/xwiki-platform-core/xwiki-platform-icon/xwiki-platform-icon-ui/src/main/resources/IconThemesCode/IconPicker.xml +++ b/xwiki-platform-core/xwiki-platform-icon/xwiki-platform-icon-ui/src/main/resources/IconThemesCode/IconPicker.xml @@ -232,24 +232,25 @@ require(['jquery', 'xwiki-icon-picker'], function($) { /** * Display the list of icons */ - var displayList = function(iconTheme) { + var displayList = function(iconList, iconTheme) { // Filter the icons we display based on the value of the input field. let selectedIconName = ''; if (currentInput.data('xwikiIconPickerSettings') !== '') { selectedIconName = currentInput[0].value.replace(currentInput.data('xwikiIconPickerSettings').prefix, ''); } // For each icon - for (var i=0; i < iconTheme.length; ++i) { + for (var i=0; i < iconList.length; ++i) { + let icon = iconList[i]; // Display the icon - if (selectedIconName === '' || iconTheme[i].name.includes(selectedIconName)) { + if (selectedIconName === '' || icon.name.includes(selectedIconName)) { var displayer = $(document.createElement('div')); iconListSection.append(displayer); displayer.addClass('xwikiIconPickerIcon'); var imageDiv = $(document.createElement('div')); - imageDiv.addClass('xwikiIconPickerIconImage').html(iconTheme[i].render); + imageDiv.addClass('xwikiIconPickerIconImage').html(icon.render); displayer.append(imageDiv); var iconNameSpan = $(document.createElement('span')); - iconNameSpan.addClass('xwikiIconPickerIconName').text(iconTheme[i].name); + iconNameSpan.addClass('xwikiIconPickerIconName').text(icon.name); displayer.append(iconNameSpan); // Change the input value when the icon is clicked displayer.on('click', function(event) { @@ -268,7 +269,7 @@ require(['jquery', 'xwiki-icon-picker'], function($) { // Put the result in the icons map icons[iconTheme] = dataIcons; // Display the list - displayList(icons[iconTheme]); + displayList(icons[iconTheme], iconTheme); // Hide the spinner spinner.hide(); }); @@ -326,7 +327,7 @@ require(['jquery', 'xwiki-icon-picker'], function($) { loadIconList(currentIconTheme) } else { // just display what have been previously loaded - displayList(icons[currentIconTheme]); + displayList(icons[currentIconTheme], currentIconTheme); } }); } @@ -421,7 +422,7 @@ require(['jquery', 'xwiki-icon-picker'], function($) { // Display icons if (icons[currentIconTheme].length > 0) { // display the icon theme since it has already be loaded - displayList(icons[currentIconTheme]); + displayList(icons[currentIconTheme], currentIconTheme); } else { // load the icon theme loadIconList(currentIconTheme); @@ -432,7 +433,7 @@ require(['jquery', 'xwiki-icon-picker'], function($) { // Remove all the displayed icons $('.xwikiIconPickerIcon').remove(); // Display the new ones. We always reload because the filter results are unrelated. - displayList(icons[currentIconTheme]); + displayList(icons[currentIconTheme], currentIconTheme); }; currentInput.on('keyup', function(event) { // Close the picker when the user press 'escape'. From fd1505ecc68cc0ad71e3d0b40eb3a6c5e32d6292 Mon Sep 17 00:00:00 2001 From: LucasC Date: Fri, 4 Oct 2024 10:31:39 +0200 Subject: [PATCH 03/14] XWIKI-22540: Slow loading time when changing the icons theme to Silk in the Icon picker * Removed unwanted changes --- .../src/main/resources/IconThemesCode/IconPicker.xml | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/xwiki-platform-core/xwiki-platform-icon/xwiki-platform-icon-ui/src/main/resources/IconThemesCode/IconPicker.xml b/xwiki-platform-core/xwiki-platform-icon/xwiki-platform-icon-ui/src/main/resources/IconThemesCode/IconPicker.xml index 2a90e550173c..38178d8f021e 100644 --- a/xwiki-platform-core/xwiki-platform-icon/xwiki-platform-icon-ui/src/main/resources/IconThemesCode/IconPicker.xml +++ b/xwiki-platform-core/xwiki-platform-icon/xwiki-platform-icon-ui/src/main/resources/IconThemesCode/IconPicker.xml @@ -232,7 +232,7 @@ require(['jquery', 'xwiki-icon-picker'], function($) { /** * Display the list of icons */ - var displayList = function(iconList, iconTheme) { + var displayList = function(iconList) { // Filter the icons we display based on the value of the input field. let selectedIconName = ''; if (currentInput.data('xwikiIconPickerSettings') !== '') { @@ -269,7 +269,7 @@ require(['jquery', 'xwiki-icon-picker'], function($) { // Put the result in the icons map icons[iconTheme] = dataIcons; // Display the list - displayList(icons[iconTheme], iconTheme); + displayList(icons[iconTheme]); // Hide the spinner spinner.hide(); }); @@ -327,7 +327,7 @@ require(['jquery', 'xwiki-icon-picker'], function($) { loadIconList(currentIconTheme) } else { // just display what have been previously loaded - displayList(icons[currentIconTheme], currentIconTheme); + displayList(icons[currentIconTheme]); } }); } @@ -422,7 +422,7 @@ require(['jquery', 'xwiki-icon-picker'], function($) { // Display icons if (icons[currentIconTheme].length > 0) { // display the icon theme since it has already be loaded - displayList(icons[currentIconTheme], currentIconTheme); + displayList(icons[currentIconTheme]); } else { // load the icon theme loadIconList(currentIconTheme); @@ -433,7 +433,7 @@ require(['jquery', 'xwiki-icon-picker'], function($) { // Remove all the displayed icons $('.xwikiIconPickerIcon').remove(); // Display the new ones. We always reload because the filter results are unrelated. - displayList(icons[currentIconTheme], currentIconTheme); + displayList(icons[currentIconTheme]); }; currentInput.on('keyup', function(event) { // Close the picker when the user press 'escape'. From cdc937f73035d89c756106a01568505b8f1d1821 Mon Sep 17 00:00:00 2001 From: LucasC Date: Mon, 9 Dec 2024 17:43:44 +0100 Subject: [PATCH 04/14] XWIKI-22540: Slow loading time when changing the icons theme to Silk in the Icon picker * Fix codestyle Co-authored-by: Marius Dumitru Florea --- .../src/main/resources/IconThemesCode/IconPicker.xml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/xwiki-platform-core/xwiki-platform-icon/xwiki-platform-icon-ui/src/main/resources/IconThemesCode/IconPicker.xml b/xwiki-platform-core/xwiki-platform-icon/xwiki-platform-icon-ui/src/main/resources/IconThemesCode/IconPicker.xml index e7e47ce440ae..1654054e0a2d 100644 --- a/xwiki-platform-core/xwiki-platform-icon/xwiki-platform-icon-ui/src/main/resources/IconThemesCode/IconPicker.xml +++ b/xwiki-platform-core/xwiki-platform-icon/xwiki-platform-icon-ui/src/main/resources/IconThemesCode/IconPicker.xml @@ -55,7 +55,7 @@ #set ($iconNamePrefix = $request.query.toLowerCase()) #foreach ($xwikiIcon in $xwikiIcons) #if ("$!iconNamePrefix" == '' || $xwikiIcon.startsWith($iconNamePrefix)) - #set($icon = { + #set ($icon = { 'name': $xwikiIcon, 'render': $services.icon.renderHTML($xwikiIcon, $iconTheme) }) From 00538418f57d841d5f6bb06fd9cc672ec0f57959 Mon Sep 17 00:00:00 2001 From: LucasC Date: Mon, 9 Dec 2024 18:02:43 +0100 Subject: [PATCH 05/14] XWIKI-22540: Slow loading time when changing the icons theme to Silk in the Icon picker * Fixed codestyle I didn't rerun all the tests. Co-authored-by: Marius Dumitru Florea --- .../src/main/webjar/xwiki-icon/iconService.js | 2 +- .../src/main/resources/IconThemesCode/IconPicker.xml | 7 +++---- 2 files changed, 4 insertions(+), 5 deletions(-) diff --git a/xwiki-platform-core/xwiki-platform-ckeditor/xwiki-platform-ckeditor-plugins/src/main/webjar/xwiki-icon/iconService.js b/xwiki-platform-core/xwiki-platform-ckeditor/xwiki-platform-ckeditor-plugins/src/main/webjar/xwiki-icon/iconService.js index ca88a3741b40..2658f02c8127 100644 --- a/xwiki-platform-core/xwiki-platform-ckeditor/xwiki-platform-ckeditor-plugins/src/main/webjar/xwiki-icon/iconService.js +++ b/xwiki-platform-core/xwiki-platform-ckeditor/xwiki-platform-ckeditor-plugins/src/main/webjar/xwiki-icon/iconService.js @@ -52,7 +52,7 @@ define('xwiki-iconService', [ iconsPromise = iconsPromisesPerTheme[query] = $.getJSON(getResourceURL('data_icons', { iconTheme, query, - 'metadata': 'true' + metadata: true })); iconsPromise.catch(() => { // Reset the promise so that we can try again later. diff --git a/xwiki-platform-core/xwiki-platform-icon/xwiki-platform-icon-ui/src/main/resources/IconThemesCode/IconPicker.xml b/xwiki-platform-core/xwiki-platform-icon/xwiki-platform-icon-ui/src/main/resources/IconThemesCode/IconPicker.xml index 1654054e0a2d..063b450be9be 100644 --- a/xwiki-platform-core/xwiki-platform-icon/xwiki-platform-icon-ui/src/main/resources/IconThemesCode/IconPicker.xml +++ b/xwiki-platform-core/xwiki-platform-icon/xwiki-platform-icon-ui/src/main/resources/IconThemesCode/IconPicker.xml @@ -59,8 +59,8 @@ 'name': $xwikiIcon, 'render': $services.icon.renderHTML($xwikiIcon, $iconTheme) }) - #if($request.metadata == 'true') - #set($discard = $icon.put('metadata', $services.icon.getMetaData($xwikiIcon, $iconTheme))) + #if ($request.metadata == 'true') + #set ($icon.metadata = $services.icon.getMetaData($xwikiIcon, $iconTheme)) #end #set ($discard = $icons.add($icon)) #end @@ -243,8 +243,7 @@ require(['jquery', 'xwiki-icon-picker'], function($) { selectedIconName = currentInput[0].value.replace(currentInput.data('xwikiIconPickerSettings').prefix, ''); } // For each icon - for (var i=0; i < iconList.length; ++i) { - let icon = iconList[i]; + iconList.forEach(icon => { // Display the icon if (selectedIconName === '' || icon.name.includes(selectedIconName)) { var displayer = $(document.createElement('div')); From 36426138db9832d67ea98a5727961d3188888f7e Mon Sep 17 00:00:00 2001 From: LucasC Date: Fri, 10 Jan 2025 17:55:41 +0100 Subject: [PATCH 06/14] XWIKI-22540: Slow loading time when changing the icons theme to Silk in the Icon picker * (WIP) * Check for the state of loaded icons and load new icons when the scroll reaches the bottom (see line 309) * Implement an additional cache? --- .../resources/IconThemesCode/IconPicker.xml | 51 +++++++++++++++---- 1 file changed, 42 insertions(+), 9 deletions(-) diff --git a/xwiki-platform-core/xwiki-platform-icon/xwiki-platform-icon-ui/src/main/resources/IconThemesCode/IconPicker.xml b/xwiki-platform-core/xwiki-platform-icon/xwiki-platform-icon-ui/src/main/resources/IconThemesCode/IconPicker.xml index 063b450be9be..4a122f45fc18 100644 --- a/xwiki-platform-core/xwiki-platform-icon/xwiki-platform-icon-ui/src/main/resources/IconThemesCode/IconPicker.xml +++ b/xwiki-platform-core/xwiki-platform-icon/xwiki-platform-icon-ui/src/main/resources/IconThemesCode/IconPicker.xml @@ -46,6 +46,20 @@ #set ($discard = $map.put('currentIconTheme', $services.icon.currentIconSetName)) #jsonResponse($map) ########################### +## DATA: ICON_AMOUNT +########################### +#elseif ($request.action == 'data_iconamount') + #set ($iconTheme = $request.iconTheme) + #set ($xwikiIcons = $collectiontool.sort($services.icon.getIconNames($iconTheme))) + #set ($iconNamePrefix = $request.query.toLowerCase()) + #set ($total = 0) + #foreach ($xwikiIcon in $xwikiIcons) + #if ("$!iconNamePrefix" == '' || $xwikiIcon.startsWith($iconNamePrefix)) + #set ($total = $total + 1) + #end + #end + #jsonResponse($total) +########################### ## DATA: ICONS ########################### #elseif ($request.action == 'data_icons') @@ -53,16 +67,23 @@ #set ($iconTheme = $request.iconTheme) #set ($xwikiIcons = $collectiontool.sort($services.icon.getIconNames($iconTheme))) #set ($iconNamePrefix = $request.query.toLowerCase()) + #set ($offset = $numbertool.toNumber($request.offset).intValue()) + #set ($number = $numbertool.toNumber($request.number).intValue()) + #if (!$offset || $offset < 0) + #set($offset = 0) + #end #foreach ($xwikiIcon in $xwikiIcons) #if ("$!iconNamePrefix" == '' || $xwikiIcon.startsWith($iconNamePrefix)) - #set ($icon = { - 'name': $xwikiIcon, - 'render': $services.icon.renderHTML($xwikiIcon, $iconTheme) - }) - #if ($request.metadata == 'true') - #set ($icon.metadata = $services.icon.getMetaData($xwikiIcon, $iconTheme)) + #if (($foreach.count >= $offset) && (!$number || $foreach.count < $offset + $number)) + #set ($icon = { + 'name': $xwikiIcon, + 'render': $services.icon.renderHTML($xwikiIcon, $iconTheme) + }) + #if ($request.metadata == 'true') + #set ($icon.metadata = $services.icon.getMetaData($xwikiIcon, $iconTheme)) + #end + #set ($discard = $icons.add($icon)) #end - #set ($discard = $icons.add($icon)) #end #end #jsonResponse($icons) @@ -261,14 +282,19 @@ require(['jquery', 'xwiki-icon-picker'], function($) { closePicker(); }); } - } + }); } /** * Load the icon list (get the JSON from the server) and display it afterwards */ var loadIconList = function(iconTheme) { - $.getJSON(getResourceURL('data_icons', 'iconTheme=' + iconTheme), function(dataIcons) { + let pageSize = 20; + let maxItems = 0; + $.getJSON(getResourceURL('data_iconamount', 'iconTheme=' + iconTheme) , function(dataIconAmount) {maxItems = + dataIconAmount}); + $.getJSON(getResourceURL('data_icons', 'iconTheme=' + iconTheme + '&number=' + pageSize.toString()), + function(dataIcons) { // Put the result in the icons map icons[iconTheme] = dataIcons; // Display the list @@ -276,6 +302,13 @@ require(['jquery', 'xwiki-icon-picker'], function($) { // Hide the spinner spinner.hide(); }); + // Load more items if the user scrolled at the end of the current list and everything is not loaded yet. + iconListSection.off('scroll'); + iconListSection.on('scroll', event => { + if ( iconListSection[0].scrollTop + iconListSection[0].clientHeight >= iconListSection[0].scrollHeight) { + console.log('I am on the bottom!'); + } + }); } /** From 1546dc7c3ab90363af717e6870d7fc2e111fdfbf Mon Sep 17 00:00:00 2001 From: LucasC Date: Mon, 13 Jan 2025 15:25:36 +0100 Subject: [PATCH 07/14] XWIKI-22540: Slow loading time when changing the icons theme to Silk in the Icon picker * Implemented a part by part load. * No cache. * Improved various code quality related to comments from this morning. --- .../resources/IconThemesCode/IconPicker.xml | 69 ++++++++++++------- 1 file changed, 43 insertions(+), 26 deletions(-) diff --git a/xwiki-platform-core/xwiki-platform-icon/xwiki-platform-icon-ui/src/main/resources/IconThemesCode/IconPicker.xml b/xwiki-platform-core/xwiki-platform-icon/xwiki-platform-icon-ui/src/main/resources/IconThemesCode/IconPicker.xml index 4a122f45fc18..0746be1adcfe 100644 --- a/xwiki-platform-core/xwiki-platform-icon/xwiki-platform-icon-ui/src/main/resources/IconThemesCode/IconPicker.xml +++ b/xwiki-platform-core/xwiki-platform-icon/xwiki-platform-icon-ui/src/main/resources/IconThemesCode/IconPicker.xml @@ -48,13 +48,13 @@ ########################### ## DATA: ICON_AMOUNT ########################### -#elseif ($request.action == 'data_iconamount') +#elseif ($request.action == 'data_iconcount') #set ($iconTheme = $request.iconTheme) #set ($xwikiIcons = $collectiontool.sort($services.icon.getIconNames($iconTheme))) #set ($iconNamePrefix = $request.query.toLowerCase()) #set ($total = 0) #foreach ($xwikiIcon in $xwikiIcons) - #if ("$!iconNamePrefix" == '' || $xwikiIcon.startsWith($iconNamePrefix)) + #if ("$!iconNamePrefix" == '' || $xwikiIcon.toLowerCase().startsWith($iconNamePrefix)) #set ($total = $total + 1) #end #end @@ -68,16 +68,17 @@ #set ($xwikiIcons = $collectiontool.sort($services.icon.getIconNames($iconTheme))) #set ($iconNamePrefix = $request.query.toLowerCase()) #set ($offset = $numbertool.toNumber($request.offset).intValue()) - #set ($number = $numbertool.toNumber($request.number).intValue()) + #set ($limit = $numbertool.toNumber($request.limit).intValue()) #if (!$offset || $offset < 0) #set($offset = 0) #end #foreach ($xwikiIcon in $xwikiIcons) - #if ("$!iconNamePrefix" == '' || $xwikiIcon.startsWith($iconNamePrefix)) - #if (($foreach.count >= $offset) && (!$number || $foreach.count < $offset + $number)) + #if ("$!iconNamePrefix" == '' || $xwikiIcon.toLowerCase().startsWith($iconNamePrefix)) + #if (($foreach.count >= $offset) && (!$limit || $foreach.count < $offset + $limit)) #set ($icon = { 'name': $xwikiIcon, - 'render': $services.icon.renderHTML($xwikiIcon, $iconTheme) + 'render': $services.icon.renderHTML($xwikiIcon, $iconTheme), + 'queryString': $iconNamePrefix }) #if ($request.metadata == 'true') #set ($icon.metadata = $services.icon.getMetaData($xwikiIcon, $iconTheme)) @@ -259,8 +260,9 @@ require(['jquery', 'xwiki-icon-picker'], function($) { */ var displayList = function(iconList) { // Filter the icons we display based on the value of the input field. - let selectedIconName = ''; + let selectedIconName = currentInput[0].value; if (currentInput.data('xwikiIconPickerSettings') !== '') { + // We need to remove the prefix for comparison to UI elements. selectedIconName = currentInput[0].value.replace(currentInput.data('xwikiIconPickerSettings').prefix, ''); } // For each icon @@ -286,29 +288,44 @@ require(['jquery', 'xwiki-icon-picker'], function($) { } /** - * Load the icon list (get the JSON from the server) and display it afterwards + * Load part of the icon list (get the JSON from the server) and display it afterwards */ var loadIconList = function(iconTheme) { - let pageSize = 20; - let maxItems = 0; - $.getJSON(getResourceURL('data_iconamount', 'iconTheme=' + iconTheme) , function(dataIconAmount) {maxItems = + var pageSize = 20; + var maxItems = -1; + // Recursive function helper. This calls the page to retrieve the icon information, by chunk of pageSize. + // After receiving the icon info, it displays them and calls itself again if the colortheme is not fully loaded. + var partialLoadIcon = function () { + let itemCount = icons[iconTheme].length; + if( maxItems === -1) { + $.getJSON(getResourceURL('data_iconcount', 'iconTheme=' + iconTheme) , function(dataIconAmount) {maxItems = dataIconAmount}); - $.getJSON(getResourceURL('data_icons', 'iconTheme=' + iconTheme + '&number=' + pageSize.toString()), - function(dataIcons) { - // Put the result in the icons map - icons[iconTheme] = dataIcons; - // Display the list - displayList(icons[iconTheme]); - // Hide the spinner - spinner.hide(); - }); - // Load more items if the user scrolled at the end of the current list and everything is not loaded yet. - iconListSection.off('scroll'); - iconListSection.on('scroll', event => { - if ( iconListSection[0].scrollTop + iconListSection[0].clientHeight >= iconListSection[0].scrollHeight) { - console.log('I am on the bottom!'); } - }); + $.getJSON(getResourceURL('data_icons', 'iconTheme=' + iconTheme + + '&offset=' + itemCount.toString() + + '&limit=' + pageSize.toString()), + function(dataIcons) { + // Put the result in the icons map + icons[iconTheme].push.apply(icons[iconTheme], dataIcons); + // Display the list of new icons. + // Since this recursive calls can take a while on poor network, we want to make sure we only display the newly + // retrieved icons if the iconTheme input still has their value. + if (iconTheme === currentIconTheme) { + displayList(dataIcons); + } + // Whatever the value of the current icon theme, we finish loading this one so that we have a correct state + // if the user ever comes back to it. + if (itemCount + pageSize < maxItems) { + partialLoadIcon(maxItems); + } else if (iconTheme === currentIconTheme) { + // All icons have been loaded and the user didn't change the icon theme in the meantime. + // We can finalize the rendering and hide the spinner. + spinner.hide(); + } + }); + }; + // We want the first call to retrieve the total amount of items that should be loaded. + partialLoadIcon(); } /** From ec97807ecd045504dfee9a8b403c98eb5c8afbd0 Mon Sep 17 00:00:00 2001 From: LucasC Date: Mon, 13 Jan 2025 15:32:45 +0100 Subject: [PATCH 08/14] XWIKI-22540: Slow loading time when changing the icons theme to Silk in the Icon picker * Improved code style --- .../src/main/resources/IconThemesCode/IconPicker.xml | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/xwiki-platform-core/xwiki-platform-icon/xwiki-platform-icon-ui/src/main/resources/IconThemesCode/IconPicker.xml b/xwiki-platform-core/xwiki-platform-icon/xwiki-platform-icon-ui/src/main/resources/IconThemesCode/IconPicker.xml index 0746be1adcfe..f190f37987e1 100644 --- a/xwiki-platform-core/xwiki-platform-icon/xwiki-platform-icon-ui/src/main/resources/IconThemesCode/IconPicker.xml +++ b/xwiki-platform-core/xwiki-platform-icon/xwiki-platform-icon-ui/src/main/resources/IconThemesCode/IconPicker.xml @@ -54,7 +54,7 @@ #set ($iconNamePrefix = $request.query.toLowerCase()) #set ($total = 0) #foreach ($xwikiIcon in $xwikiIcons) - #if ("$!iconNamePrefix" == '' || $xwikiIcon.toLowerCase().startsWith($iconNamePrefix)) + #if ("$!iconNamePrefix" == '' || $stringtool.startsWithIgnoreCase($xwikiIcon, $iconNamePrefix)) #set ($total = $total + 1) #end #end @@ -73,7 +73,7 @@ #set($offset = 0) #end #foreach ($xwikiIcon in $xwikiIcons) - #if ("$!iconNamePrefix" == '' || $xwikiIcon.toLowerCase().startsWith($iconNamePrefix)) + #if ("$!iconNamePrefix" == '' || $stringtool.startsWithIgnoreCase($xwikiIcon, $iconNamePrefix)) #if (($foreach.count >= $offset) && (!$limit || $foreach.count < $offset + $limit)) #set ($icon = { 'name': $xwikiIcon, From 4622902217714f240d45594855600cbdc0f24ee6 Mon Sep 17 00:00:00 2001 From: LucasC Date: Mon, 13 Jan 2025 15:36:51 +0100 Subject: [PATCH 09/14] XWIKI-22540: Slow loading time when changing the icons theme to Silk in the Icon picker * Improved request action name formatting. --- .../src/main/resources/IconThemesCode/IconPicker.xml | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/xwiki-platform-core/xwiki-platform-icon/xwiki-platform-icon-ui/src/main/resources/IconThemesCode/IconPicker.xml b/xwiki-platform-core/xwiki-platform-icon/xwiki-platform-icon-ui/src/main/resources/IconThemesCode/IconPicker.xml index f190f37987e1..4ddacd05d558 100644 --- a/xwiki-platform-core/xwiki-platform-icon/xwiki-platform-icon-ui/src/main/resources/IconThemesCode/IconPicker.xml +++ b/xwiki-platform-core/xwiki-platform-icon/xwiki-platform-icon-ui/src/main/resources/IconThemesCode/IconPicker.xml @@ -48,7 +48,7 @@ ########################### ## DATA: ICON_AMOUNT ########################### -#elseif ($request.action == 'data_iconcount') +#elseif ($request.action == 'data_icon_count') #set ($iconTheme = $request.iconTheme) #set ($xwikiIcons = $collectiontool.sort($services.icon.getIconNames($iconTheme))) #set ($iconNamePrefix = $request.query.toLowerCase()) @@ -298,7 +298,7 @@ require(['jquery', 'xwiki-icon-picker'], function($) { var partialLoadIcon = function () { let itemCount = icons[iconTheme].length; if( maxItems === -1) { - $.getJSON(getResourceURL('data_iconcount', 'iconTheme=' + iconTheme) , function(dataIconAmount) {maxItems = + $.getJSON(getResourceURL('data_icon_count', 'iconTheme=' + iconTheme) , function(dataIconAmount) {maxItems = dataIconAmount}); } $.getJSON(getResourceURL('data_icons', 'iconTheme=' + iconTheme From 127d5852ae6ec5607384b9abff8f0677e60c70fa Mon Sep 17 00:00:00 2001 From: LucasC Date: Mon, 13 Jan 2025 15:39:28 +0100 Subject: [PATCH 10/14] XWIKI-22540: Slow loading time when changing the icons theme to Silk in the Icon picker * Improved request action name formatting. --- .../src/main/resources/IconThemesCode/IconPicker.xml | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/xwiki-platform-core/xwiki-platform-icon/xwiki-platform-icon-ui/src/main/resources/IconThemesCode/IconPicker.xml b/xwiki-platform-core/xwiki-platform-icon/xwiki-platform-icon-ui/src/main/resources/IconThemesCode/IconPicker.xml index 4ddacd05d558..43c18e45e761 100644 --- a/xwiki-platform-core/xwiki-platform-icon/xwiki-platform-icon-ui/src/main/resources/IconThemesCode/IconPicker.xml +++ b/xwiki-platform-core/xwiki-platform-icon/xwiki-platform-icon-ui/src/main/resources/IconThemesCode/IconPicker.xml @@ -46,7 +46,7 @@ #set ($discard = $map.put('currentIconTheme', $services.icon.currentIconSetName)) #jsonResponse($map) ########################### -## DATA: ICON_AMOUNT +## DATA: ICON COUNT ########################### #elseif ($request.action == 'data_icon_count') #set ($iconTheme = $request.iconTheme) @@ -298,8 +298,9 @@ require(['jquery', 'xwiki-icon-picker'], function($) { var partialLoadIcon = function () { let itemCount = icons[iconTheme].length; if( maxItems === -1) { - $.getJSON(getResourceURL('data_icon_count', 'iconTheme=' + iconTheme) , function(dataIconAmount) {maxItems = - dataIconAmount}); + // The first call will retrieve the total count of items we'll need to get. + $.getJSON(getResourceURL('data_icon_count', 'iconTheme=' + iconTheme) , function(dataIconCount) {maxItems = + dataIconCount}); } $.getJSON(getResourceURL('data_icons', 'iconTheme=' + iconTheme + '&offset=' + itemCount.toString() @@ -324,7 +325,6 @@ require(['jquery', 'xwiki-icon-picker'], function($) { } }); }; - // We want the first call to retrieve the total amount of items that should be loaded. partialLoadIcon(); } From 6663d3c8547b1cb2582dbd832288d175aecd8cc3 Mon Sep 17 00:00:00 2001 From: LucasC Date: Mon, 13 Jan 2025 16:01:48 +0100 Subject: [PATCH 11/14] XWIKI-22540: Slow loading time when changing the icons theme to Silk in the Icon picker * Improved performance of `limit` icon requests. --- .../src/main/resources/IconThemesCode/IconPicker.xml | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/xwiki-platform-core/xwiki-platform-icon/xwiki-platform-icon-ui/src/main/resources/IconThemesCode/IconPicker.xml b/xwiki-platform-core/xwiki-platform-icon/xwiki-platform-icon-ui/src/main/resources/IconThemesCode/IconPicker.xml index 43c18e45e761..99477b7beee9 100644 --- a/xwiki-platform-core/xwiki-platform-icon/xwiki-platform-icon-ui/src/main/resources/IconThemesCode/IconPicker.xml +++ b/xwiki-platform-core/xwiki-platform-icon/xwiki-platform-icon-ui/src/main/resources/IconThemesCode/IconPicker.xml @@ -74,7 +74,9 @@ #end #foreach ($xwikiIcon in $xwikiIcons) #if ("$!iconNamePrefix" == '' || $stringtool.startsWithIgnoreCase($xwikiIcon, $iconNamePrefix)) - #if (($foreach.count >= $offset) && (!$limit || $foreach.count < $offset + $limit)) + ## We compare $foreach.count - 1 to our values since foreach.count is 1 based index (!= standard 0 based index) + ## We want to make sure we retrieve only the right values. + #if (($foreach.count - 1 >= $offset) && (!$limit || $foreach.count - 1 < $offset + $limit)) #set ($icon = { 'name': $xwikiIcon, 'render': $services.icon.renderHTML($xwikiIcon, $iconTheme), @@ -84,6 +86,9 @@ #set ($icon.metadata = $services.icon.getMetaData($xwikiIcon, $iconTheme)) #end #set ($discard = $icons.add($icon)) + #elseif($limit && ($foreach.count - 1 >= $offset + $limit)) + ## We already got all the icons we wanted, we can exit the foreach loop. + #break #end #end #end From a0087f8247ec073d7446e92395639244a09b1311 Mon Sep 17 00:00:00 2001 From: LucasC Date: Mon, 13 Jan 2025 16:15:14 +0100 Subject: [PATCH 12/14] XWIKI-22540: Slow loading time when changing the icons theme to Silk in the Icon picker * Escaped special characters --- .../main/resources/IconThemesCode/IconPicker.xml | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/xwiki-platform-core/xwiki-platform-icon/xwiki-platform-icon-ui/src/main/resources/IconThemesCode/IconPicker.xml b/xwiki-platform-core/xwiki-platform-icon/xwiki-platform-icon-ui/src/main/resources/IconThemesCode/IconPicker.xml index 99477b7beee9..4c84eac829c5 100644 --- a/xwiki-platform-core/xwiki-platform-icon/xwiki-platform-icon-ui/src/main/resources/IconThemesCode/IconPicker.xml +++ b/xwiki-platform-core/xwiki-platform-icon/xwiki-platform-icon-ui/src/main/resources/IconThemesCode/IconPicker.xml @@ -69,14 +69,14 @@ #set ($iconNamePrefix = $request.query.toLowerCase()) #set ($offset = $numbertool.toNumber($request.offset).intValue()) #set ($limit = $numbertool.toNumber($request.limit).intValue()) - #if (!$offset || $offset < 0) + #if (!$offset || $offset < 0) #set($offset = 0) #end #foreach ($xwikiIcon in $xwikiIcons) #if ("$!iconNamePrefix" == '' || $stringtool.startsWithIgnoreCase($xwikiIcon, $iconNamePrefix)) ## We compare $foreach.count - 1 to our values since foreach.count is 1 based index (!= standard 0 based index) ## We want to make sure we retrieve only the right values. - #if (($foreach.count - 1 >= $offset) && (!$limit || $foreach.count - 1 < $offset + $limit)) + #if (($foreach.count - 1 >= $offset) && (!$limit || $foreach.count - 1 < $offset + $limit)) #set ($icon = { 'name': $xwikiIcon, 'render': $services.icon.renderHTML($xwikiIcon, $iconTheme), @@ -86,7 +86,7 @@ #set ($icon.metadata = $services.icon.getMetaData($xwikiIcon, $iconTheme)) #end #set ($discard = $icons.add($icon)) - #elseif($limit && ($foreach.count - 1 >= $offset + $limit)) + #elseif($limit && ($foreach.count - 1 >= $offset + $limit)) ## We already got all the icons we wanted, we can exit the foreach loop. #break #end @@ -271,7 +271,7 @@ require(['jquery', 'xwiki-icon-picker'], function($) { selectedIconName = currentInput[0].value.replace(currentInput.data('xwikiIconPickerSettings').prefix, ''); } // For each icon - iconList.forEach(icon => { + iconList.forEach(icon => { // Display the icon if (selectedIconName === '' || icon.name.includes(selectedIconName)) { var displayer = $(document.createElement('div')); @@ -308,8 +308,8 @@ require(['jquery', 'xwiki-icon-picker'], function($) { dataIconCount}); } $.getJSON(getResourceURL('data_icons', 'iconTheme=' + iconTheme - + '&offset=' + itemCount.toString() - + '&limit=' + pageSize.toString()), + + '&offset=' + itemCount.toString() + + '&limit=' + pageSize.toString()), function(dataIcons) { // Put the result in the icons map icons[iconTheme].push.apply(icons[iconTheme], dataIcons); @@ -321,7 +321,7 @@ require(['jquery', 'xwiki-icon-picker'], function($) { } // Whatever the value of the current icon theme, we finish loading this one so that we have a correct state // if the user ever comes back to it. - if (itemCount + pageSize < maxItems) { + if (itemCount + pageSize < maxItems) { partialLoadIcon(maxItems); } else if (iconTheme === currentIconTheme) { // All icons have been loaded and the user didn't change the icon theme in the meantime. From 8a7c415c80e0a35e0eb0b76a0e130a3af3a34ea5 Mon Sep 17 00:00:00 2001 From: LucasC Date: Mon, 13 Jan 2025 16:19:46 +0100 Subject: [PATCH 13/14] XWIKI-22540: Slow loading time when changing the icons theme to Silk in the Icon picker * Improved code style --- .../src/main/resources/IconThemesCode/IconPicker.xml | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/xwiki-platform-core/xwiki-platform-icon/xwiki-platform-icon-ui/src/main/resources/IconThemesCode/IconPicker.xml b/xwiki-platform-core/xwiki-platform-icon/xwiki-platform-icon-ui/src/main/resources/IconThemesCode/IconPicker.xml index 4c84eac829c5..31845e1aa23e 100644 --- a/xwiki-platform-core/xwiki-platform-icon/xwiki-platform-icon-ui/src/main/resources/IconThemesCode/IconPicker.xml +++ b/xwiki-platform-core/xwiki-platform-icon/xwiki-platform-icon-ui/src/main/resources/IconThemesCode/IconPicker.xml @@ -70,7 +70,7 @@ #set ($offset = $numbertool.toNumber($request.offset).intValue()) #set ($limit = $numbertool.toNumber($request.limit).intValue()) #if (!$offset || $offset < 0) - #set($offset = 0) + #set ($offset = 0) #end #foreach ($xwikiIcon in $xwikiIcons) #if ("$!iconNamePrefix" == '' || $stringtool.startsWithIgnoreCase($xwikiIcon, $iconNamePrefix)) @@ -304,8 +304,9 @@ require(['jquery', 'xwiki-icon-picker'], function($) { let itemCount = icons[iconTheme].length; if( maxItems === -1) { // The first call will retrieve the total count of items we'll need to get. - $.getJSON(getResourceURL('data_icon_count', 'iconTheme=' + iconTheme) , function(dataIconCount) {maxItems = - dataIconCount}); + $.getJSON(getResourceURL('data_icon_count', 'iconTheme=' + iconTheme) , function(dataIconCount) { + maxItems = dataIconCount + }); } $.getJSON(getResourceURL('data_icons', 'iconTheme=' + iconTheme + '&offset=' + itemCount.toString() From 4b1f7e1db0627cdde04136e21f641f4e6c6bb809 Mon Sep 17 00:00:00 2001 From: LucasC Date: Mon, 13 Jan 2025 16:38:31 +0100 Subject: [PATCH 14/14] XWIKI-22540: Slow loading time when changing the icons theme to Silk in the Icon picker * Fixed the spinner not disappearing when changing the icontheme before the initial one is fully loaded. --- .../src/main/resources/IconThemesCode/IconPicker.xml | 2 ++ 1 file changed, 2 insertions(+) diff --git a/xwiki-platform-core/xwiki-platform-icon/xwiki-platform-icon-ui/src/main/resources/IconThemesCode/IconPicker.xml b/xwiki-platform-core/xwiki-platform-icon/xwiki-platform-icon-ui/src/main/resources/IconThemesCode/IconPicker.xml index 31845e1aa23e..14043458b480 100644 --- a/xwiki-platform-core/xwiki-platform-icon/xwiki-platform-icon-ui/src/main/resources/IconThemesCode/IconPicker.xml +++ b/xwiki-platform-core/xwiki-platform-icon/xwiki-platform-icon-ui/src/main/resources/IconThemesCode/IconPicker.xml @@ -379,6 +379,8 @@ require(['jquery', 'xwiki-icon-picker'], function($) { currentIconTheme = iconThemeSelector.val(); // Remove all the displayed icons $('.xwikiIconPickerIcon').remove(); + // And reset the state of the loading spinner. + spinner.hide(); // Display the new ones if (icons[currentIconTheme].length == 0) { // if the icon theme has not already been loaded, load it