performance issue when creating a large list with ui-collectionview and angular in iOS

[liuy97]

App shows two templates with different heights. the list have 10000 items.

<GridLayout>
  <CollectionView
    [items]="itemService.items()"
    [itemTemplateSelector]="templateSelector"
  >
    <ng-template cvTemplateKey="header" let-item="item">
      <StackLayout class="bg-sky-100">
        <Label [text]="item.name" class="text-lg text-green-400 p-4"></Label>
      </StackLayout>
    </ng-template>

    <ng-template cvTemplateKey="item" let-item="item">
      <StackLayout
        [nsRouterLink]="['/item', item.id]"
        class="border-b-indigo border-b-2"
      >
        <Label [text]="item.name" class="text-lg text-gray-500 p-4"></Label>
        <Label [text]="item.role" class="text-lg text-gray-400 p-4"></Label>
      </StackLayout>
    </ng-template>
  </CollectionView>
</GridLayout>

It takes about 10s before the list can be scrolled in iOS. But It scrolls smoothly in android.

https://github.com/user-attachments/assets/2a61ec83-d5e0-42cf-a01b-d4252592d73d

demo.zip

[farfromrefug]

you need to show how you setup items. And try to measure the time to fill your items array. Never faced such an issue on iOS

[liuy97]

@farfromrefug , thanks for your reply. I have attached the source code (demo) which generated random items in item.service.ts. It takes 0.005 seconds to generate all items.

init() {
    const itemMap = new Map<string, Array<any>>();
    for (let id = 0; id < 10000; id++) {
      const initial = this.getRandomLetter();
      const item = {
        id,
        name: initial + this.getRandomLetter() + id,
        role: ["Technology", "Goalkeeper", "Defender", "Midfielder", "Forward"][
          Math.floor(Math.random() * 5)
        ],
      };
      if (!itemMap.has(initial)) {
        itemMap.set(initial, []);
      }
      itemMap.get(initial).push(item);
    }
    const result = [];
    let id = 0;
    const keys = Array.from(itemMap.keys());
    keys.sort();
    keys.forEach((key) => {
      result.push({ id: id++, name: key, role: "header" });
      itemMap.get(key).forEach((item) => {
        item.id = id++;
        result.push(item);
      });
    });
    this.items.set(result);
  }

[farfromrefug]

@liuy97 thanks but I can't test anything. I am.on a six months bike trip. So.only small.bug fixes.for.me ;) if you can debug this it would.be great