NativeScript Angular RadListView рендеринг очень медленно

Проблема:

У меня есть приложение angular-nativescript, которому необходимо отображать некоторые элементы в сетке. Я использую RadListView для рендеринга списка, и после обновления моих зависимостей angular, {N} и других библиотек за последние несколько месяцев я заметил, что рендеринг элементов RadListView стал невыносимо медленным. У меня есть несколько «вкладок», чтобы вы могли видеть разные типы элементов, и всякий раз, когда вы переключаете «вкладки», необходимо полностью перерисовывать список с новым временем. Перед выполнением некоторых обновлений (которые, как я надеялся, улучшат производительность приложения) переключение вкладок не будет иметь значительного отставания даже при рендеринге 100+ элементов. Теперь загрузка даже 24 занимает несколько секунд (я переключился на динамический рендеринг при прокрутке, чтобы ускорить процесс, но этого недостаточно).

Информация о платформе:

• ios (tns ios 5.2.0, 5.3.1) [Angular 7]
• nativescript-ui-listview: 6.1.0
• nativescript-ui-core: 2.0.1
• nativescript-ui-sidedrawer: 6.0.0
• CLI: 5.3.1
• Кросс-платформенные модули: 5.3.1
• Время выполнения: tns-ios 5.3.1

Проблема, по-видимому, связана с наличием некоторых вложенных структур в RadListView. Мой исходный код (который работал без изменений, так как отлично работал в более старых версиях {N}, Angular, nativescript-ui:

<RadListView id="itemList" top="0" left="0" [items]="displayedInventory" separatorColor="white" [loadOnDemandMode]="loadOnDemandMode"
    (loadMoreDataRequested)="onLoadMoreItemsRequested($event)" class="gridview-wrap-tabs" dock="top" [ngClass]="{'gridview-wrap-tabs': (posLocation && posLocation.tabs)}">
    <ListViewStaggeredLayout tkListViewLayout scrollDirection="Vertical" spanCount="4" itemHeight="180" horizontalAlignment="left"
        class="inventory-list-view-inner" separatorColor="black">
    </ListViewStaggeredLayout>
    <ng-template tkListItemTemplate let-item="item">
        <StackLayout class="inventory-stack-wrap">
            <GridLayout rows="auto, *, auto" columns="auto, auto" orientation="horizontal" class="outerBox" stretchLastChild="true" (tap)="addToCart(item, true)"
                [ngClass]="{ 'portraitBox': orientation==='portrait' , 'selected-inventory-item': item.isSelected, 'empty-inventory-item': item.price < 0}">
                <Label row="0" col="0" *ngIf="item.type==='category'" height="40px" class="price-label-category" [ngClass]="{ 'portrait-category-label': orientation==='portrait' }"
                    text="Category"></Label>
                <Label row="1" col="0" verticalAlignment="top" [text]="item.name" *ngIf="item.type==='category'" class="name-label" textWrap="true"
                    [ngClass]="{ 'portrait-name-label': orientation==='portrait' }"></Label>

                <Label row="0" col="0" verticalAlignment="top" [text]="item.name" *ngIf="item.name && item.name.length <=2 0 && item.type !=='category'"
                    class="name-label" textWrap="true" [ngClass]="{ 'portrait-name-label': orientation==='portrait' }"></Label>
                <Label row="0" col="0" verticalAlignment="top" [text]="item.name.slice(0,20) + '...'" *ngIf="item.name
                    && item.name.length> 20 && item.type !== 'category'" class="name-label" textWrap="true" [ngClass]="{'portrait-name-label': orientation
                    === 'portrait'}"></Label>

                <GridLayout col="0" colSpan="2" row="1" rowSpan="2" width="100%" *ngIf="item.imageSource">
                    <Image class="inventory-image" [ngClass]="{'portrait-inventory-image': orientation==='portrait'}" [src]="item.imageSource"></Image>
                </GridLayout>
                <GridLayout width="100%" *ngIf="item.type !=='category'" row="2" col="0" colSpan="2" columns="auto, *, 10" rows="auto">
                    <Label col="1" row="0" horizontalAlignment="right" height="40px" class="price-label" [ngClass]="{ 'portrait-price-label': orientation==='portrait' }"
                        text="${{item.price | number: '1.2-2'}}"></Label>
                </GridLayout>
            </GridLayout>
        </StackLayout>
    </ng-template>
</RadListView>

В качестве доказательства концепции, чтобы убедиться, что рендеринг RadListView - это то, что его замедляет, я попробовал его с помощью всего лишь одной метки с именем элемента, встроенным в, и рендеринг был почти мгновенным - так что, похоже, проблема с как RadListView отображает такие подэлементы, как StackLayout, GridLayout. Я также попытался заменить GridLayout на DockLayout и удалить все angular * ngIfs и * ngClasses (и удалил тег Image), чтобы посмотреть, улучшит ли это производительность, но, похоже, это не дало никакого эффекта. По-прежнему очень медленно загружается всего 24 элемента. (Загрузка значительно увеличивается для меньшего количества элементов, но изначально я не могу отобразить меньше 24)

Любые идеи? Я бы предпочел не понижать мои зависимости angular и nativescript