Как реализовать виртуальную прокрутку на материальном дереве гранд дочернего уровня

Question

У меня угловое дерево с уровнями родителя, ребенка и большого ребенка.При нажатии на ребенка я добавляю внука в него.Но внук, имеющий огромные данные до 4к записей.Что делает дерево чрезвычайно медленным.Мой код, как показано ниже

<div *ngIf="isGrandChildLoaded"><mat-spinner></mat-spinner></div>
<mat-tree [dataSource]="dataSource" [treeControl]="treeControl">
  <!-- This is the tree node template for leaf nodes -->
  <mat-tree-node *matTreeNodeDef="let node" matTreeNodePadding>
    <!-- use a disabled button to provide padding for tree leaf -->
    <button mat-icon-button disabled></button>
    {{node.name}}
  </mat-tree-node>
  <!-- This is the tree node template for expandable nodes -->
  <mat-tree-node *matTreeNodeDef="let node;when: hasChild" matTreeNodePadding>
    <button mat-icon-button matTreeNodeToggle
            [attr.aria-label]="'toggle ' + node.name">
      <mat-icon class="mat-icon-rtl-mirror" (click)="clickTreeNode(node)">
        {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
      </mat-icon>
    </button>
    {{node.name}}
  </mat-tree-node>
</mat-tree>

Обратите внимание, что я пробовал в stackblitz: Мой код

Я заметил, что виртуальная прокрутка будет лучшим решением в этом случае.И я видел пример: Refernce

Но в примере он имеет virtual-scroll на уровне всего дерева с полным dataSource.

Как можно добавить виртуальный свиток на уровне внука с 10 элементами одновременно.Так что это не замораживает DOM и Tree.Пожалуйста, ведите меня ...