remove deprecated animations API (#2916)

### Fixes #
<!-- Mention the issues this PR addresses -->

### Checks

- [ ] Ran `yarn test-build`
- [ ] Updated relevant documentations
- [ ] Updated matching config options in altair-static

### Changes proposed in this pull request:
<!-- Describe the changes being introduced in this PR -->

## Summary by Sourcery

Migrate components away from the deprecated Angular animations API to a
CSS-based animation system with global utility classes and enable OnPush
change detection for better performance

Enhancements:
- Remove Angular animations triggers and related imports from several
components
- Replace in-template animation bindings with animate.enter/leave
attributes backed by CSS utility classes
- Introduce a new global SCSS file defining animation keyframes and
utility classes
- Enable OnPush change detection on affected components
- Import the new animations stylesheet into the main styles

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

* **Refactor**
* Modernized animation system throughout the application with improved
CSS-based animation utilities for fade and slide transitions.
* Optimized component performance by implementing more efficient change
detection strategies.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

Author: imolorhe

packages/altair-app/src/app/modules/altair/components/confirm-toast/confirm-toast.component.ts

@@ -1,30 +1,12 @@
-import {
-  animate,
-  keyframes,
-  state,
-  style,
-  transition,
-  trigger,
-} from '@angular/animations';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { Toast } from 'ngx-toastr';
 
 @Component({
   selector: 'app-confirm-toast',
   templateUrl: './confirm-toast.component.html',
   styles: [],
-  animations: [
-    trigger('flyInOut', [
-      state('inactive', style({ opacity: 0 })),
-      state('active', style({ opacity: 1 })),
-      state('removed', style({ opacity: 0 })),
-      transition('inactive => active', animate('{{ easeTime }}ms {{ easing }}')),
-      transition('active => removed', animate('{{ easeTime }}ms {{ easing }}')),
-    ]),
-  ],
   standalone: false,
-  // components with animations don't work well with OnPush change detection
-  // changeDetection: ChangeDetectionStrategy.OnPush,
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ConfirmToastComponent extends Toast {
   action(event: Event) {

packages/altair-app/src/app/modules/altair/components/doc-viewer/doc-viewer-search-results/doc-viewer-search-results.component.html

@@ -7,7 +7,8 @@
     <div
       class="doc-viewer-search-result-item"
       (click)="goToItem(result)"
-      [@showResultItem]
+      animate.enter="animate animate-slide-in"
+      animate.leave="animate animate-fade-out"
     >
       @switch (result.cat) {
         @case ('type') {

packages/altair-app/src/app/modules/altair/components/doc-viewer/doc-viewer-search-results/doc-viewer-search-results.component.ts

@@ -1,44 +1,12 @@
-import { Component, ChangeDetectionStrategy, input, output } from '@angular/core';
-import { trigger, state, style, animate, transition } from '@angular/animations';
-import { GraphQLArgument } from 'graphql';
+import { ChangeDetectionStrategy, Component, input, output } from '@angular/core';
 import { DocumentIndexEntry } from '../models';
 
 @Component({
   selector: 'app-doc-viewer-search-results',
   templateUrl: './doc-viewer-search-results.component.html',
   styleUrls: ['./doc-viewer-search-results.component.scss'],
-  // eslint-disable-next-line @angular-eslint/component-max-inline-declarations
-  animations: [
-    trigger('showResultItem', [
-      transition(':enter', [
-        style({
-          opacity: 0,
-          transform: 'translateY(50%)',
-        }),
-        animate(
-          200,
-          style({
-            opacity: 1,
-            transform: 'translateY(0)',
-          })
-        ),
-      ]),
-      transition(':leave', [
-        style({ height: '*' }), // Get the runtime height for use in the next transition
-        animate(
-          200,
-          style({
-            transform: 'translateY(150%)',
-            opacity: 0,
-            height: 0, // This works since we retrieved the runtime height previously
-          })
-        ),
-      ]),
-    ]),
-  ],
   standalone: false,
-  // components with animations don't work well with OnPush change detection
-  // changeDetection: ChangeDetectionStrategy.OnPush,
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class DocViewerSearchResultsComponent {
   readonly results = input<DocumentIndexEntry[]>([]);

packages/altair-app/src/app/modules/altair/components/doc-viewer/doc-viewer/doc-viewer.component.html

@@ -1,7 +1,11 @@
 @if (allowIntrospection() && docView(); as docView) {
   <div #docViewer class="app-doc-viewer">
     @if (isLoading()) {
-      <div class="app-doc-loader" [@fadeInOutAnimation]>
+      <div
+        class="app-doc-loader"
+        animate.enter="animate animate-fade-in"
+        animate.leave="animate animate-fade-out"
+      >
         <div class="app-doc-loader-content">
           <img
             src="assets/img/logo.svg"

packages/altair-app/src/app/modules/altair/components/doc-viewer/doc-viewer/doc-viewer.component.ts

@@ -16,7 +16,6 @@ import { debug } from '../../../utils/logger';
 import { UntilDestroy } from '@ngneat/until-destroy';
 import { GraphQLSchema, GraphQLObjectType, GraphQLDirective } from 'graphql';
 import { DocumentIndexEntry } from '../models';
-import { fadeInOutAnimationTrigger } from '../../../animations';
 import { GqlService } from '../../../services';
 import getRootTypes from '../../../utils/get-root-types';
 import { DocView } from 'altair-graphql-core/build/types/state/docs.interfaces';
@@ -29,7 +28,6 @@ import { debounce } from 'lodash-es';
 @Component({
   selector: 'app-doc-viewer',
   templateUrl: './doc-viewer.component.html',
-  animations: [fadeInOutAnimationTrigger],
   standalone: false,
 })
 export class DocViewerComponent {

packages/altair-app/src/app/modules/altair/components/tips/tips.component.html

@@ -1,5 +1,9 @@
 @if (currentTip) {
-  <div class="tips" [@fadeInOutAnimation]>
+  <div
+    class="tips"
+    animate.enter="animate animate-fade-in"
+    animate.leave="animate animate-fade-out"
+  >
     <div class="tips-inner">
       <span class="tips-title">Tip:</span>
       {{ currentTip.text }}

packages/altair-app/src/app/modules/altair/components/tips/tips.component.ts

@@ -3,9 +3,9 @@ import {
   OnDestroy,
   effect,
   input,
+  ChangeDetectionStrategy,
 } from '@angular/core';
 import { rand } from '../../utils';
-import { fadeInOutAnimationTrigger } from '../../animations';
 
 interface Tip {
   text: string;
@@ -22,8 +22,8 @@ const DEFAULT_TIP_INTERVAL = 60000;
   selector: 'app-tips',
   templateUrl: './tips.component.html',
   styles: ``,
-  animations: [fadeInOutAnimationTrigger],
   standalone: false,
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class TipsComponent implements OnDestroy {
   readonly activeWindowId = input('');

packages/altair-app/src/app/modules/altair/containers/window/window.component.ts

@@ -37,7 +37,6 @@ import {
 } from '../../services';
 import { Observable, EMPTY, combineLatest, of } from 'rxjs';
 import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
-import { fadeInOutAnimationTrigger } from '../../animations';
 import { IDictionary, TrackByIdItem } from '../../interfaces/shared';
 import collectVariables from 'codemirror-graphql/utils/collectVariables';
 import {
@@ -78,7 +77,6 @@ import { LoadingRequestStateEntry } from 'altair-graphql-core/build/types/state/
 @Component({
   selector: 'app-window',
   templateUrl: './window.component.html',
-  animations: [fadeInOutAnimationTrigger],
   standalone: false,
 })
 export class WindowComponent implements OnInit {

packages/altair-app/src/scss/_animations.scss

@@ -0,0 +1,67 @@
+.animate {
+  transition-duration: 300ms;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  animation-duration: 300ms;
+  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  will-change: opacity, transform;
+}
+
+.animate--infinite {
+  animation-iteration-count: infinite;
+}
+
+.animate-fade-in {
+  animation-name: animate-fade-in;
+}
+
+@keyframes animate-fade-in {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+.animate-fade-out {
+  animation-name: animate-fade-out;
+}
+
+@keyframes animate-fade-out {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+
+.animate-slide-in {
+  animation-name: animate-slide-in;
+}
+
+@keyframes animate-slide-in {
+  0% {
+    opacity: 0;
+    transform: translateY(50%);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.animate-slide-out {
+  animation-name: animate-slide-out;
+}
+
+@keyframes animate-slide-out {
+  0% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  100% {
+    opacity: 0;
+    transform: translateY(50%);
+  }
+}

packages/altair-app/src/styles.scss

@@ -7,5 +7,6 @@
 @import 'ngx-toastr/toastr';
 
 @import 'scss/globals';
+@import 'scss/animations';
 @import 'scss/framework';
 @import 'scss/all';