feat(kit): improve IDEA auto import for TuiImageLoading

projects/demo-cypress/src/tests/lazy-loading.cy.ts

@@ -9,8 +9,8 @@ describe('LazyLoading', () => {
         template: `
             <img
                 alt="picsum"
-                loading="lazy"
                 style="--tui-background-neutral-2: rgba(0, 0, 0, 0.16); width: 100px; height: 100px; display: block"
+                tuiLoading="lazy"
                 [attr.src]="src"
             />
 

projects/demo/src/modules/app/landing/index.html

@@ -1,7 +1,7 @@
 <img
     alt="taiga"
-    loading="lazy"
     src="assets/images/taiga.svg"
+    tuiLoading="lazy"
     class="taiga"
 />
 
@@ -15,8 +15,8 @@
     <div class="topography">
         <img
             alt="topography"
-            loading="lazy"
             src="assets/images/topography.svg"
+            tuiLoading="lazy"
         />
     </div>
     <div
@@ -26,9 +26,9 @@
         <iframe
             *ngIf="intersected || current === 1"
             height="100%"
-            loading="lazy"
             src="https://taiga-family.github.io/preview-landing-components/"
             title="Preview of components"
+            tuiLoading="lazy"
             width="100%"
             @tuiFadeIn
         ></iframe>
@@ -127,8 +127,8 @@ <h2 class="opensource">It’s open source</h2>
     <div class="map">
         <img
             alt="topography"
-            loading="lazy"
             src="assets/images/topography.svg"
+            tuiLoading="lazy"
         />
     </div>
     <h1
@@ -139,8 +139,8 @@ <h2 class="opensource">It’s open source</h2>
         <span class="dash">——</span>
         <img
             alt="logo"
-            loading="lazy"
             src="assets/images/taiga.svg"
+            tuiLoading="lazy"
             class="logo"
         />
         <br />
@@ -190,8 +190,8 @@ <h2 class="opensource">It’s open source</h2>
     ></button>
     <img
         alt="by TBank"
-        loading="lazy"
         src="assets/images/by.svg"
+        tuiLoading="lazy"
         class="by"
     />
 </footer>

projects/demo/src/modules/app/landing/index.ts

@@ -16,6 +16,7 @@ import {
 } from '@ng-web-apis/intersection-observer';
 import {EMPTY_QUERY, TuiAutoFocus, tuiProvide, TuiRepeatTimes} from '@taiga-ui/cdk';
 import {TuiButton, tuiFadeIn} from '@taiga-ui/core';
+import {TuiImgLazyLoading} from '@taiga-ui/kit';
 
 @Component({
     standalone: true,
@@ -24,6 +25,7 @@ import {TuiButton, tuiFadeIn} from '@taiga-ui/core';
         RouterLink,
         TuiAutoFocus,
         TuiButton,
+        TuiImgLazyLoading,
         TuiRepeatTimes,
         WaIntersectionObserver,
     ],

projects/demo/src/modules/directives/lazy-loading/examples/1/index.html

@@ -2,7 +2,7 @@
     <img
         alt="Random image"
         height="200"
-        loading="lazy"
+        tuiLoading="lazy"
         width="300"
         [src]="src"
     />

projects/demo/src/modules/directives/lazy-loading/examples/import/template.md

@@ -3,6 +3,6 @@
   src="myImage.jpg"
   height="200"
   width="300"
-  loading="lazy"
+  tuiLoading="lazy"
 />
 ```

projects/demo/src/modules/directives/lazy-loading/index.html

@@ -6,7 +6,7 @@
     <ng-template pageTab>
         <p>
             Directive can be used for image lazy loading. It is the same as
-            <code>loading="lazy"</code>
+            <code>tuiLoading="lazy"</code>
             but supports also old browsers
         </p>
 

projects/kit/components/avatar/avatar.component.ts

@@ -7,13 +7,14 @@ import {
     tuiAppearanceOptionsProvider,
     TuiWithAppearance,
 } from '@taiga-ui/core/directives/appearance';
+import {TuiImgLazyLoading} from '@taiga-ui/kit/directives';
 
 import {TUI_AVATAR_OPTIONS} from './avatar.options';
 
 @Component({
     standalone: true,
     selector: 'tui-avatar,button[tuiAvatar],a[tuiAvatar]',
-    imports: [NgSwitch, NgSwitchCase, NgSwitchDefault, TuiIcon],
+    imports: [NgSwitch, NgSwitchCase, NgSwitchDefault, TuiIcon, TuiImgLazyLoading],
     templateUrl: './avatar.template.html',
     styleUrls: ['./avatar.style.less'],
     changeDetection: ChangeDetectionStrategy.OnPush,

projects/kit/components/avatar/avatar.template.html

@@ -2,7 +2,7 @@
     <img
         *ngSwitchCase="'img'"
         alt=""
-        loading="lazy"
+        tuiLoading="lazy"
         [src]="value"
     />
     <tui-icon

projects/kit/directives/lazy-loading/lazy-loading.directive.ts

@@ -8,20 +8,20 @@ import {TuiLazyLoadingService} from './lazy-loading.service';
 
 @Directive({
     standalone: true,
-    selector: 'img[loading="lazy"]',
+    selector: 'img[loading="lazy"],img[tuiLoading="lazy"]',
     providers: [TuiLazyLoadingService, IntersectionObserverService],
     host: {
         '[style.animation]': 'animation()',
         '[style.background]': 'background()',
+        '[attr.loading]': 'supported ? "lazy" : null',
         '[attr.src]': 'src()',
         '(load)': 'unset()',
         '(error)': 'unset()',
     },
 })
 export class TuiImgLazyLoading {
-    private readonly el = tuiInjectElement<HTMLImageElement>();
     private readonly loading$ = inject(TuiLazyLoadingService);
-    private readonly supported = 'loading' in this.el;
+    protected readonly supported = 'loading' in tuiInjectElement<HTMLImageElement>();
     protected src = signal<SafeResourceUrl | string | null>(null);
     protected animation = signal('tuiSkeletonVibe ease-in-out 1s infinite alternate');
     protected background = signal('var(--tui-background-neutral-2)');