Page with oh-repeater (sourceType: group) loading slowly

Hi,
i’m finding new problems every day and so this is my next post with a main-ui problem.
i have made a (tabbed) page with 3 list widgets where i use oh-repeater with sourceType = group.
the (custom) widgets work but they all work kind of “slowly”.
Here’s how the tabbed page behaves:
repeater
Tab “Home” has no oh-repeater, tabs “Licht” and “RS” both have widgets with oh-repeater and sourceType = group and the last tab (“RS_M”) has basically the same widgets but sourceType = array .

The page with sourceType = array loads faster than the pages with sourceType = group
i have 1071 items and i guess this is why the widget with sourceType = group takes “this long” to load, right?

with sourceType = array i have to define the items within the YAML code and that’s not ideal because i have to create a new widget for every group. looks like this:

          - component: oh-repeater
            config:
              for: listItem
              sourceType: array
              in:
                - item: Büro
                  label: rs_buero
                - item: rs_foyer_links
                  label: Fy links
                - item: rs_foyer_mitte
                  label: Fy mitte
                - item: rs_foyer_rechts
                  label: Fy rechts
                - item: rs_kueche
                  label: Küche

i could work with one widget if i define the items via props but i couldn’t figure that one out… tried with array this way:

          - component: oh-repeater
            config:
              for: listItem
              sourceType: array
              in:
                - item: =props.item1
                  label: =props.label1
                - item: =props.item2
                  label: =props.label2

this is not working. the widget just uses “props.item1” etc.

then i tried with sourceType = range

          - component: oh-repeater
            config:
              for: listItem
              sourceType: range
              rangeStart: 1
              rangeStop: 7
              rangeStep: 1

but i couldn’t figure out how to combine it so this:

item: =items[props.item + loop.listItem]

in the end would translate to

item: =items[props.item1]
item: =items[props.item2]
etc.

or
text: =props.label + loop.listItem >>> text: =props.label1

it would be great if you guys could help me out again!

This is a known limitation. In the yaml files you cannot use expressions when defining arrays like that. There are different workarounds for some of the various situations where this comes up. I’m not aware of one in this case.

I would suggest that you configure the repeaters with itemsWithTags. This gives several benefits.

  1. I think it’s much faster than the itemsInGroup call, but I haven’t tested extensively.
  2. You can use one widget definition and just set the specific tag via the widget props to get multiple versions of the widgets.

Then you just have to tag each item that you want in a widget the the appropriate tag, which also gives you complete control of which items appear where independent of any groups which may have some other functional significance.

i haven’t tested tags because i thought it would be the same but i’ll give it a try tomorrow!

ok, too bad.
is it possible to combine the text from props with the range value from the loop (“props.item” + “1” = props.item1) in the component config?

There is a special variable that is created alongside the loop variable, loop.variableName_idx that contains the numerical index of the loop iteration. So in this case: props["item" + loop.listItem_idx] should get you what you are looking for.

ok thanks for the hint!
loop.listItem_idx goes from 0 to 6 for rangeStart: 1, rangeStop: 7 and rangeStep: 1
(while expected it to go from 1 to 7).

and i’m still having some trouble with the line below.
this is how it works with sourceType: group

icon: "=(items[loop.listItem.item + '_lm'].state > 89) ? 'blades_80_'  + themeOptions.dark : (items[loop.listItem.item + '_lm'].state > 79) ? 'blades_80_'  + themeOptions.dark : (items[loop.listItem.item + '_lm'].state > 69) ? 'blades_70_'  + themeOptions.dark : (items[loop.listItem.item + '_lm'].state > 59) ? 'blades_60_'  + themeOptions.dark : (items[loop.listItem.item + '_lm'].state > 49) ? 'blades_50_'  + themeOptions.dark : (items[loop.listItem.item + '_lm'].state > 39) ? 'blades_40_'  + themeOptions.dark : (items[loop.listItem.item + '_lm'].state > 29) ? 'blades_30_'  + themeOptions.dark : (items[loop.listItem.item + '_lm'].state > 19) ? 'blades_20_' + themeOptions.dark : (items[loop.listItem.item + '_lm'].state > 9) ? 'blades_10_' : 'blades_00_' + themeOptions.dark "

but for sourceType: range i need to change items[loop.listItem.item + '_lm'] to items[props["item" + loop.listItem_idx] + '_lm'] and that’s not accepted:

All collection items must start at the same column at line 123, column 39:

                                      icon: "=(items[props["item" + loop.listIt…

i added the tags to the items (items with Group “gRS_EG” now also have the Tag “tRS_EG”) but the problem is the same as with groups.
here’s the pages with sourceType: groups / sourceType: range / sourceType: tags
repeater_sourceType
i don’t see a difference in loading behaviour between groups and tags, whereas range loads instantly / without any visible delay.

“range” works fine with me, and with this code i am able to display the icons correctly:

icon: '=(items[props["item" + loop.listItem_idx] + "_lm"].state > 89) ? "blades_80_"  + themeOptions.dark : (items[props["item" + loop.listItem_idx] + "_lm"].state > 79) ? "blades_80_"  + themeOptions.dark : (items[props["item" + loop.listItem_idx] + "_lm"].state > 69) ? "blades_70_"  + themeOptions.dark : (items[props["item" + loop.listItem_idx] + "_lm"].state > 59) ? "blades_60_"  + themeOptions.dark : (items[props["item" + loop.listItem_idx] + "_lm"].state > 49) ? "blades_50_"  + themeOptions.dark : (items[props["item" + loop.listItem_idx] + "_lm"].state > 39) ? "blades_40_"  + themeOptions.dark : (items[props["item" + loop.listItem_idx] + "_lm"].state > 29) ? "blades_30_"  + themeOptions.dark : (items[props["item" + loop.listItem_idx] + "_lm"].state > 19) ? "blades_20_" + themeOptions.dark : (items[props["item" + loop.listItem_idx] + "_lm"].state > 9) ? "blades_10_" : "blades_00_" + themeOptions.dark '

edit1: in the gif RS_Arr is the page with sourceType: range, forgot to chang the tab name…
edit2: found the solution for icon code

thanks for the help!