Slow panel performance with large select field in block blueprints

1

Hey Kirby forum,

Before I describe the problem let me shortly describe the base setup I am using: I am using Kirby in a way which gets close to a page builder. A user can choose different layouts and multiple blocks inside those layouts. In multiple blocks there’s a select field which lets the user select an icon from a cached list of icon names that are present in the iconset. The iconset is rather large consisting of around 3800 icons.

Now the problem: When accessing a page in the panel there’s an extremely long server response time of about 10s. After digging into what makes the server take so long I found that Kirby is basically sending a rather long instruction set with the blocks-fields query which holds said list of icons but multiple times, at least for every block which uses the iconset. This adds up to 530k lines of json which explains the long load time. To test if this is in fact the culprit I exchanged the cached list with a short list of a couple test keys. This reduced the server response time by 7s which is great (but still edging on too high imo).

I would have thought there is some mechanism in place to prevent the transfer of redundant data. All the blocks extend the same icon field which uses a singular collection to query the cached icon list.

Is there a way to make this more performant without losing the option to include all icons? Theres of course the possibility to use a text field instead but that would just be a hazard as I wouldn’t trust users to not produce any typos.

2

Have you tried multiselect with a display limit?
Search included for bonus points.

yourfield:
  type: multiselect
  max: 1
  search:
    min: 3
    display: 50
3

Thanks for the idea @stffr ! Unfortunately the behaviour is just as before. Inside the blocks-fields response sent to the panel the whole iconset is still present just the display inside the field itself is shorter.

4

Perhaps another approach makes more sense to avoid this problem.
Is it even necessary to load all icons just for the preview?
I use the icons from FontAwesome and have integrated a link to search and select an icon.
The icon name can simply be copied and pasted from the FontAwesome website.

fontawesome

The (simplified) code in the template looks like this:

<i class="fa-sharp fa-light fa-<?= $page->icon() ?>"></i>

This way is not so comfortable, but saves a lot of resources.

5

Leaving apart the fact that an iconset of 3800 icons seems really exaggerated, you would run into a similar issue with less icons as well, if they are queried over and over again.

So what could be options. Similar to what @GB_DESIGN suggested above, you could have a single source (even in the same page in the panel), from which the user could copy-paste the correct string. Then the query would have to be executed only once per page, not a hundred times.