NS7 - Angular - iOS navigating takes 1-4 seconds

[13dante04]

Environment
Provide version numbers for the following components (information can be retrieved by running tns info in your project folder or by inspecting the package.json of the project):

• CLI: 7.1.2.
• NativeScript-Angular: 11.0.1
• Angular: ^11.1.1
  ns info:

⚠ Update available for component nativescript. Your current version is 7.1.2 and the latest available version is 7.2.0.
✔ Component @nativescript/core has 7.2.1 version and is up to date.
✔ Component @nativescript/ios has 7.2.0 version and is up to date.

Describe the bug

When navigating from one component to the other, it takes a few seconds and the app hangs (in varies from 0.8s to 3.7 seconds). The console logs some kind of message each time:

Hang detected: 1.74s (always-on hang reporting)

I didn't manage to find out where the message is coming from (nativescript or ios).

To Reproduce
1.) Nativescript iOS, run on real device.
2.) Setup a layout in Angular
3.) Add a (tap) event listener which calls a functions that uses RouterExtensions to navigate.
4.) Run the app, tap the button, and navigate to the layout

Expected behavior
The layout switches almost instantaneously.
Additional context

Amount of elements and code run in the background of the component that I'm navigating to definitely does not seem to be an issue since navigation to a component like this also takes the same amount of time.

On android, it switches almost instantly.

<GridLayout class="edukacija-component component" rows="auto, auto, *">
    <CustomActionBar
        marginTop="5"
        height="48"
        row="0"
        [rounded]="false"
        width="100%">
    </CustomActionBar>
    <Label row="1" class="component__title" text="Edukacija"></Label>
    <FlexboxLayout row="2" class="edukacija-component__content">
    <FlexboxLayout class="edukacija-component__content--item">
        <Label text="Pregled edukacija"></Label>
        <ExtendedButton
        label="Detalji"
        containerClass="edukacija-component__content--item-button"
        buttonClass="btn btn-link"
        iconLeftClass="esicon color-primary"
        iconLeft="&#xe91a;"
        (onTap)="openEdukacije()">
        </ExtendedButton>
    </FlexboxLayout>
    <FlexboxLayout class="edukacija-component__content--item has-border">
        <Label text="Pregled poljoprivrednih gospodarstava"></Label>
        <ExtendedButton
        label="Detalji"
        containerClass="edukacija-component__content--item-button"
        buttonClass="btn btn-link"
        iconLeftClass="esicon color-primary"
        iconLeft="&#xe91a;"
        (onTap)="openEdukacije()">
        </ExtendedButton>
    </FlexboxLayout>

    </FlexboxLayout>
</GridLayout>

EDIT: Extended button and Custom action bar consist of three layouts each