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

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

Start by running the attached demo.zip on iOS and comparing its behavior with Android, using the two variable-height templates and 10,000 items described in the issue. The work is done when the list becomes scrollable without the reported 10-second delay while preserving both templates and smooth scrolling.