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)"
>
-
+
}
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',