fix(addon-mobile): add smooth opacity change for MobileCalendar to …

…hide blinking initial view (#6459)

Co-authored-by: taiga-family-bot <[email protected]>

projects/addon-mobile/components/mobile-calendar/mobile-calendar.component.ts

@@ -71,7 +71,7 @@ import {
     styleUrls: ['./mobile-calendar.style.less'],
     changeDetection: ChangeDetectionStrategy.OnPush,
     providers: TUI_MOBILE_CALENDAR_PROVIDERS,
-    host: {'[class._ios]': 'isIOS'},
+    host: {'[class._ios]': 'isIOS', '[class._initialized]': 'initialized'},
 })
 export class TuiMobileCalendarComponent implements AfterViewInit {
     @ViewChild('yearsScrollRef')
@@ -118,6 +118,8 @@ export class TuiMobileCalendarComponent implements AfterViewInit {
             ),
     );
 
+    initialized = false;
+
     constructor(
         @Inject(TUI_IS_IOS) readonly isIOS: boolean,
         @Inject(TUI_IS_E2E) readonly isE2E: boolean,
@@ -304,6 +306,7 @@ export class TuiMobileCalendarComponent implements AfterViewInit {
                 takeUntil(this.destroy$),
             )
             .subscribe(() => {
+                this.initialized = true;
                 this.updateViewportDimension();
                 this.initYearScroll();
                 this.initMonthScroll();

projects/addon-mobile/components/mobile-calendar/mobile-calendar.style.less

@@ -212,3 +212,14 @@
         font-size: 1.0625rem;
     }
 }
+
+.t-week,
+.t-years,
+.t-months {
+    .transition(opacity);
+    opacity: 0;
+
+    :host(._initialized) & {
+        opacity: 1;
+    }
+}

projects/cdk/constants/version.ts

@@ -1 +1 @@
-export const TUI_VERSION = `3.62.0`;
+export const TUI_VERSION = '3.62.0';