Theme color-palettes with item-selection-list in extension property panel

[datawizards1234]

Hello

I want to create property panel for color selection. First I retrieve theme palettes and then create a property panel using item-selection-list component and color-scale as items inside it. I have problem with item-selection-list component which cannot set items values dynamically using function just as you set for ex. with dropdown list components.

If I put hardcoded values, everything works great and theme color palettes are shown, when I retrieve them with function it doesn't work.

Any ideas what may be wrong?

Code:

Commented code are hardcoded values that work

paletteItems: {
                                ref: "props.color.colorPalette",
                                type: "string",
                                component: "item-selection-list",
                                // defaultValue: 12,
                                horizontal: true,                                
                                items: function (data) {
                                    return utils.getAppThemeDataPalettes().then(function (palettes) {
                                        return palettes
                                    })
                                }
                                // items: [{
                                //     icon: "",
                                //     label: "12 Colors",
                                //     component: "color-scale",
                                //     reverse: false,
                                //     value: "12",
                                //     type: "sequential",
                                //     colors: [
                                //         "#332288",
                                //         "#6699cc",
                                //         "#88ccee",
                                //         "#44aa99",
                                //         "#117733",
                                //         "#999933",
                                //         "#ddcc77",
                                //         "#661100",
                                //         "#cc6677",
                                //         "#aa4466",
                                //         "#882255",
                                //         "#aa4499"
                                //     ]
                                // }]
                            }

function in utils file:

getAppThemeDataPalettes: function () {
            return new Promise((resolve) => {
                app.theme.get().then(function (qtheme) {
                    var palettes = qtheme.properties.palettes.data.map(function(p) {
                        var scale
                        if (p.type === 'pyramid') {
                            scale = p.scale[p.scale.length-1]
                        }
                        else if (p.type === 'row') {
                            scale = p.scale
                        }
                        return {
                            icon: "",
                            label: p.name,
                            component: "color-scale",
                            reverse: false,
                            value: p.propertyValue,
                            type: "sequential",
                            colors: scale
                        }
                    });
                    resolve(palettes)
                });
            })
        }

[devan9876]

I don't know how to fix it, but I believe the problem is rooted in the fact the function that retrieves the theme properties is asynchronous which causes the property pannel to render before the asynchronous function returns the theme properties.