feat(kit): improve IDEA auto import for TuiImageLoading

taiga-family · Sep 19, 2024 · 0210f80 · 0210f80
1 parent 4561195
commit 0210f80
Show file tree

Hide file tree

Showing 9 changed files with 18 additions and 15 deletions.
diff --git a/projects/demo-cypress/src/tests/lazy-loading.cy.ts b/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"
  />
 

diff --git a/projects/demo/src/modules/app/landing/index.html b/projects/demo/src/modules/app/landing/index.html
@@ -1,6 +1,6 @@
 <img
  alt="taiga"
- loading="lazy"
+ tuiLoading="lazy"
  src="assets/images/taiga.svg"
  class="taiga"
 />
@@ -15,7 +15,7 @@
  <div class="topography">
  <img
  alt="topography"
- loading="lazy"
+ tuiLoading="lazy"
  src="assets/images/topography.svg"
  />
  </div>
@@ -26,7 +26,7 @@
  <iframe
  *ngIf="intersected || current === 1"
  height="100%"
- loading="lazy"
+ tuiLoading="lazy"
  src="https://taiga-family.github.io/preview-landing-components/"
  title="Preview of components"
  width="100%"
@@ -127,7 +127,7 @@ <h2 class="opensource">It’s open source</h2>
  <div class="map">
  <img
  alt="topography"
- loading="lazy"
+ tuiLoading="lazy"
  src="assets/images/topography.svg"
  />
  </div>
@@ -139,7 +139,7 @@ <h2 class="opensource">It’s open source</h2>
  <span class="dash">——</span>
  <img
  alt="logo"
- loading="lazy"
+ tuiLoading="lazy"
  src="assets/images/taiga.svg"
  class="logo"
  />
@@ -190,7 +190,7 @@ <h2 class="opensource">It’s open source</h2>
  ></button>
  <img
  alt="by TBank"
- loading="lazy"
+ tuiLoading="lazy"
  src="assets/images/by.svg"
  class="by"
  />

diff --git a/projects/demo/src/modules/app/landing/index.ts b/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,
  ],

diff --git a/projects/demo/src/modules/directives/lazy-loading/examples/1/index.html b/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"
  />

diff --git a/projects/demo/src/modules/directives/lazy-loading/examples/import/template.md b/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"
 />
 ```
diff --git a/projects/demo/src/modules/directives/lazy-loading/index.html b/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>
 

diff --git a/projects/kit/components/avatar/avatar.component.ts b/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,

diff --git a/projects/kit/components/avatar/avatar.template.html b/projects/kit/components/avatar/avatar.template.html
@@ -2,7 +2,7 @@
  <img
  *ngSwitchCase="'img'"
  alt=""
- loading="lazy"
+ tuiLoading="lazy"
  [src]="value"
  />
  <tui-icon

diff --git a/projects/kit/directives/lazy-loading/lazy-loading.directive.ts b/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[tuiLoading="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)');