Angular animation and loading template not working together

I’m submitting a…

[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request
[ ] Other... Please describe:

Current behavior

The loading template does not change his state during a page animation.

Expected behavior

Once the language/scope is loaded, the loading template should detects the change and update the view.

Minimal reproduction of the problem with instructions

You can check this video showing the problem.

The “skeleton design” is still visible in the DOM despite that the scope is already loaded. The content of the <ng-template #x> is visible at the same time as the content of <ng-container *transloco="let translation; scope: 'x'; loadingTpl: x">

You can also see on StackBlitz the error.

In StackBlitz:

• You start from the home page: it’s ok (i18n in cache)
• You go to the error page: it’s ok
• You go back to the home page: it’s ok
• You go once more into the home page: it’s broken (the loading state stay until the page animation is finished. The i18n is yet cached and even if not cached, the loaded should be faster than the page animation in this case)

I recorded the bug on StackBlitz.

Code

Typo

<ng-container *transloco="let translation; scope: 'x'; loadingTpl: x">
  <p class="title">
    {{ translation('x.title') }}
  </p>
</ng-container>
<ng-template #x>
  <p class="title title-fake"></p>
</ng-template>

Animation

import {
  animate,
  animateChild,
  group,
  query,
  style
} from '@angular/animations';

export const SLIDE_FROM_RIGHT_ANIMATION = [
  style({
    position: 'relative'
  }),
  query(':enter', [
    style({
      height: '100vh',
      left: 0,
      overflow: 'hidden',
      position: 'fixed',
      top: 0,
      width: '100%'
    })
  ]),
  query(':leave', [
    style({
      height: '100vh',
      left: 0,
      overflow: 'hidden',
      position: 'absolute',
      top: 0,
      width: '100%'
    })
  ]),
  query(':leave', [
    style({
      transform: 'translateX(0%)'
    })
  ]),
  group([
    query(':enter', [
      style({
        'z-index': 0
      })
    ]),
    query(':leave', [
      style({
        'z-index': 1
      }),
      animate('350ms ease-out', style({
        transform: 'translateX(100%)'
      }))
    ])
  ]),
  query(':enter', animateChild())
];

Environment

"@angular/core": "9.1.1"
"@angular/animations": "9.1.1"
"@ngneat/transloco": "2.14.0"

[C0ZEN]

@itayod @shaharkazaz the fix is working fine, thank you. Smooth and beautiful animations in my apps now 😃

[shaharkazaz]

@C0ZEN released in v2.17.0 🙂