Угловая анимация двух отдельных элементов

Question

У нас есть два элемента

<div class="loader-content" *ngIf="(loaderSubject$ | async) === 'PENDING'" [@enterAnimation]>
</div>
<div *ngIf="(loaderSubject$ | async) === 'SUCCESS'" [@enterAnimation]>
</div>

У них есть следующие анимации

animations: [
    trigger('enterAnimation', [
        transition(':enter', [style({ opacity: 0 }), animate('2000ms', style({ opacity: 1 }))]),
        transition(':leave', [style({ opacity: 1 }), animate('2000ms', style({ opacity: 0 }))])
    ])
]

Таким образом, «PENDING» показывает загрузчик, а «Success» показывает контент div. Проблема в том, что пока каждый элемент анимируется по отдельности. Нам нужно, чтобы «Загрузчик» сначала исчезал, а затем исчезал в контенте. Прямо сейчас есть совпадение.

Если вы посмотрите на изображение выше, оно одновременно показывает загрузчик и контент. После того, как загрузчик исчезает, он удаляется из домена и содержимое перемещается вверх.