diff --git a/src/app/features/store/components/product-carousel/product-carousel.component.html b/src/app/features/store/components/product-carousel/product-carousel.component.html index 9d72b0d..9d81a14 100644 --- a/src/app/features/store/components/product-carousel/product-carousel.component.html +++ b/src/app/features/store/components/product-carousel/product-carousel.component.html @@ -62,7 +62,13 @@ (click)="selectImage(idx)" [attr.aria-label]="'Select image ' + (idx + 1)" > - Product thumbnail + Product thumbnail } diff --git a/src/app/features/store/pages/store-home-page/store-home-page.component.html b/src/app/features/store/pages/store-home-page/store-home-page.component.html index f57c312..5474657 100644 --- a/src/app/features/store/pages/store-home-page/store-home-page.component.html +++ b/src/app/features/store/pages/store-home-page/store-home-page.component.html @@ -23,24 +23,49 @@

} @else { @for (group of catalog(); track group.id; let first = $first) { - - - + } @else { + @defer (on viewport; prefetch on idle) { + + } @placeholder { +
+ } + } } } + + + + + + @if (additionalInfo(); as content) {
diff --git a/src/app/features/store/pages/store-home-page/store-home-page.component.scss b/src/app/features/store/pages/store-home-page/store-home-page.component.scss index d4dfd47..2ca1c56 100644 --- a/src/app/features/store/pages/store-home-page/store-home-page.component.scss +++ b/src/app/features/store/pages/store-home-page/store-home-page.component.scss @@ -15,6 +15,13 @@ app-store-section[id] { scroll-margin-top: 8rem; } +.store-home__deferred-group-placeholder { + display: block; + min-height: clamp(24rem, 42vw, 34rem); + content-visibility: auto; + contain-intrinsic-size: auto 30rem; +} + :host > .store-home__additional-info:not(:first-child) { margin-top: clamp(3rem, 6vw, 5rem); } diff --git a/src/app/features/store/pages/store-home-page/store-home-page.component.ts b/src/app/features/store/pages/store-home-page/store-home-page.component.ts index e33f14f..aa6334d 100644 --- a/src/app/features/store/pages/store-home-page/store-home-page.component.ts +++ b/src/app/features/store/pages/store-home-page/store-home-page.component.ts @@ -8,6 +8,7 @@ import { inject, signal, } from '@angular/core'; +import { NgTemplateOutlet } from '@angular/common'; import { HttpErrorResponse } from '@angular/common/http'; import { ActivatedRoute, Router } from '@angular/router'; import { finalize, Subscription } from 'rxjs'; @@ -44,6 +45,7 @@ import { ProductListComponent, HeroBannerComponent, MainCarouselComponent, + NgTemplateOutlet, ], templateUrl: './store-home-page.component.html', styleUrl: './store-home-page.component.scss',