Ngb-accordion last element doesn't render quickly

Question

The code seems fine but the animation of the accordion opening works fine until the last element of the opened accordion renders. The accordions have nested accordions within them. The last accordion always seems to be a little glitchy while opening. I have tried removing all code and pasting simple templates as well. With normal template code it works fine.

<div *ngrxLet="sharedFacade.isLoaded$ as dataLoaded">
    <ngb-accordion class="sidebar-accordion"  style="overflow: auto" [closeOthers]="closeOthers" [activeIds]="activeIdsMain" #accordion="ngbAccordion" id="reportElement">
        <ngb-panel ngbPanelToggle="accordion" class="custom-cLass" *ngFor=" let children of menuItems; let index = index"  id="panel-main-{{index}}">
            <ng-template *ngIf="children?.submenu" ngbPanelTitle routerLinkActive="active">
                <img [src]="children.isActive ? children.activeImg : children.icon" alt="scenario">
                <a (click)="navigate(children)" routerLink="{{children.link}}" 
                    class="menutext" [joyrideStep]="'step4-' + index" (next)="onNext()" 
                    [title]="index == 1 ? 'Package' : 'Report'"
                    [text]="index == 1 ? 
                    'Package production processes prior to the point of filling are under Package tab.' :
                    'Report tab has all your results and reporting requirements.'"
                    routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">
                    <span [ngClass]="children.isActive ? 'activeClass' : ''" class="parent-span-submenu">{{children.text}}</span>
                </a>
            </ng-template>
            <ng-template *ngIf="!children?.submenu" ngbPanelHeader>
                <div class="vert-align">
                    <img (click)="collapsePanel(children)" [src]="children.isActive ? children.activeImg : children.icon"
                        alt="scenario">
                    <a routerLink="{{children.link}}" class="menutext" routerLinkActive="active">
                        <span (click)="collapsePanel(children)" class="parent-span-header">{{children.text}}</span>
                    </a>
                </div>
            </ng-template>
            <ng-template ngbPanelContent>
                <ngb-accordion class="sidebar-child-accordion" [closeOthers]="closeOthers" #childaccord="ngbAccordion" [activeIds]="activeIdsSub">
                    <ngb-panel panelClass="custom-panel" *ngFor=" let children2 of children.submenu; let index2 = index" [disabled]="false" id="panel-sub-{{index2}}">{{children2.text}}>
                        <ng-template ngbPanelTitle>
                            <a class="dropdown-item iconify text-ellipsis" routerLinkActive="active"> <span class="child-span-submenu">{{children2.text}}</span>
                            </a>
                        </ng-template>
                        <ng-template ngbPanelHeader>
                            <a class="dropdown-item iconify text-ellipsis-report" href="#" routerLink="{{children2.link}}" routerLinkActive="active"> <span (click)="navigate(children, children2)" class="child-span-header">{{children2.text}}</span>
                            </a>
                        </ng-template>
                        <ng-template ngbPanelContent>
                            <div class="offset-1" *ngFor="let children3 of children2.submenu">
                                <a routerLink="{{children3.link}}" (click)="navigate(children, children2);" 
                                [queryParams]="{ id: (children3.link === 'fill-data-list' || children3.link === 'wholesale-data-list' || children3.link === 'retail-list' || children3.link === 'consumer-list') ? children2.packageScenarioId : children2.scenarioId, packageScenarioId: children2.packageScenarioId, eId: children2.scenarioId}"
                                class="btn content w-100" routerLinkActive="active">
                                <span class="child-span-links" 
                                 [joyrideStep]="'step5-' + children3.text.toLowerCase()" [title]="'Package & content'" 
                                 [text]="'Processes from filling through supply chain to the consumer are under the `Package & contents` tab.'"
                                 [id]="children3.text.toLowerCase()">{{children3.text}}</span></a>
                            </div>
                        </ng-template>
                    </ngb-panel>
                </ngb-accordion>
            </ng-template>
        </ngb-panel>
    </ngb-accordion>
</div>