Receiving error "Component has an invalid value for property." on App Builder

Question

I have build a custom IconProvider class to display list of SLDS icons for selection on Lightning App Builder.

public with sharing class IconProvider extends VisualEditor.DynamicPickList {
    public override VisualEditor.DataRow getDefaultValue(){
        VisualEditor.DataRow defaultValue = new VisualEditor.DataRow('', '');
        return defaultValue;
    }
    public override VisualEditor.DynamicPickListRows getValues() {
        List<Icon> icons = (List<Icon>) JSON.deserialize(PageReference.forResource('All', 'sldsIcons.json').getContent().toString(), List<Icon>.class);
        System.debug(icons);

        VisualEditor.DynamicPickListRows  options = new VisualEditor.DynamicPickListRows();
        for (Icon ic: icons) {
            options.addRow(new VisualEditor.DataRow(ic.id + ' (' + ic.route + ')', ic.fullName));
        }
        return options;
    }
    public class Icon{
        public String id;
        public String route;
        public String fullName;
    }
}

I have a static resource zip file All which has a cached list of SLDS icons in a sldsIcons.json text JSON file.

I have a custom LWC which is available for Lightning Record Pages

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>53.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__RecordPage</target>
    </targets>
    <targetConfigs>
        <targetConfig targets="lightning__RecordPage">
            <property label="Header" name="header" type="String"/>
            <property label="Header Icon" name="icon" type="String" datasource="apex://IconProvider"/>
        </targetConfig>
    </targetConfigs>
</LightningComponentBundle>

I can see the list of icon names and I can select them, but when I try to save the Lightning App Builder page definition, I receive the following error:

"Component has an invalid value for property."

Answer 1

Looks like fetching StaticResource content is considered as an Callout and saving Flexi Page definition is counted as DML operation and an Exception is displayed in Apex Logs:

System.CalloutException: You have uncommitted work pending. Please commit or rollback before calling out

So looks like I need to change my implementation to have a single JSON static resource icons (since I can't unzip file in Apex, existing libraries like Zippex fail with Maximum CPU time: 15020 out of 10000, LimitException: Apex CPU time limit exceeded, FATAL_ERROR Class.Puff.codes: line 416, column 1 when I try to use it in Apex to extract 86.7 KB JSON out of 11 KB Zip file) and change my implementation to use a simple SOQL instead of pageReference getContent method

public with sharing class IconProvider extends VisualEditor.DynamicPickList {
    public override VisualEditor.DataRow getDefaultValue(){
        VisualEditor.DataRow defaultValue = new VisualEditor.DataRow('', '');
        return defaultValue;
    }
    public override VisualEditor.DynamicPickListRows getValues() {
        StaticResource s = [select Id, Body FROM StaticResource where name = 'icons'];
        System.debug(s.Body.toString());
        List<Icon> icons = (List<Icon>) JSON.deserialize(s.Body.toString(), List<Icon>.class);

        // The following approach doesn't work because of System.CalloutException: You have uncommitted work pending. Please commit or rollback before calling out
        // List<Icon> icons = (List<Icon>) JSON.deserialize(PageReference.forResource('All', 'sldsIcons.json').getContent().toString(), List<Icon>.class);
        System.debug(icons);

        VisualEditor.DynamicPickListRows  options = new VisualEditor.DynamicPickListRows();
        for (Icon ic: icons) {
            options.addRow(new VisualEditor.DataRow(ic.id + ' (' + ic.route + ')', ic.fullName));
        }
        return options;
    }
    public class Icon{
        public String id;
        public String route;
        public String fullName;
    }
}