#2013 Loader wird nicht angezeigt

apps/page/catalog/src/lib/article-search/article-search.store.ts

@@ -90,9 +90,14 @@ export class ArticleSearchService extends ComponentStore<ArticleSearchState> {
     this.patchState({ filter });
   }
 
-  search = this.effect((options$: Observable<{ clear?: boolean; reload?: boolean }>) =>
+  search = this.effect((options$: Observable<{ clear?: boolean }>) =>
     options$.pipe(
-      tap((_) => this.patchState({ searchState: 'fetching' })),
+      tap((options) => {
+        this.patchState({
+          searchState: 'fetching',
+          items: options.clear ? [] : this.items,
+        });
+      }),
       debounceTime(250),
       withLatestFrom(this.filter$, this.items$),
       switchMap(([options, filter, items]) =>
@@ -100,8 +105,8 @@ export class ArticleSearchService extends ComponentStore<ArticleSearchState> {
           .search({
             queryToken: {
               ...filter.getQueryToken(),
-              skip: options.clear || options.reload ? 0 : items.length,
-              take: options.reload ? items.length : 25,
+              skip: items.length,
+              take: 25,
               friendlyName: this.friendlyName,
             },
           })
@@ -109,7 +114,7 @@ export class ArticleSearchService extends ComponentStore<ArticleSearchState> {
             tapResponse(
               (res) => {
                 const searchState = res.hits ? '' : 'empty';
-                if (options.clear || options.reload) {
+                if (options.clear) {
                   this.patchState({
                     hits: res.hits,
                     items: res.result,

apps/page/catalog/src/lib/article-search/search-results/search-result-item-loading.component.html

@@ -0,0 +1,17 @@
+<div class="thumbnail animation"></div>
+<div class="col">
+  <div class="author animation"></div>
+  <div class="row">
+    <div class="title animation"></div>
+    <div class="price animation"></div>
+  </div>
+  <div class="space"></div>
+  <div class="row">
+    <div class="category animation"></div>
+    <div class="stock animation"></div>
+  </div>
+  <div class="row">
+    <div class="manufacturer animation"></div>
+    <div class="ava animation"></div>
+  </div>
+</div>

apps/page/catalog/src/lib/article-search/search-results/search-result-item-loading.component.scss

@@ -0,0 +1,73 @@
+:host {
+  @apply flex flex-row rounded-card bg-white mb-2 p-4;
+  height: 155px;
+}
+
+.thumbnail {
+  width: 70px;
+  height: 90px;
+  @apply bg-ucla-blue rounded-card;
+}
+
+.space {
+  @apply flex-grow;
+}
+
+.col {
+  @apply flex flex-col flex-grow;
+}
+
+.row {
+  @apply flex flex-row justify-between flex-grow;
+}
+
+.author {
+  width: 150px;
+  @apply h-4 bg-ucla-blue ml-4 mb-2;
+}
+
+.title {
+  width: 300px;
+  @apply h-6 bg-ucla-blue ml-4;
+}
+
+.price {
+  width: 100px;
+  @apply h-6 bg-ucla-blue ml-4;
+}
+
+.category {
+  width: 200px;
+  @apply h-4 bg-ucla-blue ml-4;
+}
+
+.manufacturer {
+  width: 200px;
+  @apply h-4 bg-ucla-blue ml-4;
+}
+
+.stock {
+  width: 75px;
+  @apply h-4 bg-ucla-blue ml-4;
+}
+
+.ava {
+  width: 150px;
+  @apply h-4 bg-ucla-blue ml-4;
+}
+
+.animation {
+  animation: load 1s linear infinite;
+}
+
+@keyframes load {
+  0% {
+    opacity: 0;
+  }
+  30% {
+    opacity: 0.5;
+  }
+  100% {
+    opacity: 0;
+  }
+}

apps/page/catalog/src/lib/article-search/search-results/search-result-item-loading.component.ts

@@ -0,0 +1,11 @@
+import { Component, ChangeDetectionStrategy } from '@angular/core';
+
+@Component({
+  selector: 'page-search-result-item-loading',
+  templateUrl: 'search-result-item-loading.component.html',
+  styleUrls: ['search-result-item-loading.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class SearchResultItemLoadingComponent {
+  constructor() {}
+}

apps/page/catalog/src/lib/article-search/search-results/search-results.component.html

@@ -15,7 +15,5 @@
   <div class="product-list-result" *cdkVirtualFor="let item of results$ | async" cdkVirtualForTrackBy="trackByItemId">
     <search-result-item [item]="item"></search-result-item>
   </div>
-  <div class="product-list-result" *ngIf="fetching$ | async">
-    <div class="fetch-item-animation"></div>
-  </div>
+  <page-search-result-item-loading *ngIf="fetching$ | async"></page-search-result-item-loading>
 </cdk-virtual-scroll-viewport>

apps/page/catalog/src/lib/article-search/search-results/search-results.component.scss

@@ -14,6 +14,3 @@
   height: 155px;
   max-height: 155px;
 }
-
-.fetch-item-animation {
-}

apps/page/catalog/src/lib/article-search/search-results/search-results.component.ts

@@ -21,8 +21,6 @@ export class ArticleSearchResultsComponent implements OnInit, OnDestroy {
   @ViewChild('scrollContainer', { static: true })
   scrollContainer: CdkVirtualScrollViewport;
 
-  loading$ = new BehaviorSubject<boolean>(false);
-
   results$ = this.searchService.items$;
   fetching$ = this.searchService.fetching$;
   hits$ = this.searchService.hits$;
@@ -81,7 +79,6 @@ export class ArticleSearchResultsComponent implements OnInit, OnDestroy {
   }
 
   ngOnDestroy() {
-    this.loading$.complete();
     this.subscriptions?.unsubscribe();
 
     this.cacheCurrentData(this.searchService.processId, this.searchService.filter.getQueryParams());

apps/page/catalog/src/lib/article-search/search-results/search-results.module.ts

@@ -7,13 +7,20 @@ import { UiCommonModule } from '@ui/common';
 import { UiIconModule } from '@ui/icon';
 import { OrderByFilterComponent } from './order-by-filter/order-by-filter.component';
 import { StockInfosPipe } from './order-by-filter/stick-infos.pipe';
+import { SearchResultItemLoadingComponent } from './search-result-item-loading.component';
 import { SearchResultItemComponent } from './search-result-item.component';
 import { ArticleSearchResultsComponent } from './search-results.component';
 
 @NgModule({
   imports: [CommonModule, RouterModule, DomainCatalogModule, UiCommonModule, UiIconModule, ScrollingModule],
   exports: [ArticleSearchResultsComponent, SearchResultItemComponent, OrderByFilterComponent],
-  declarations: [ArticleSearchResultsComponent, SearchResultItemComponent, OrderByFilterComponent, StockInfosPipe],
+  declarations: [
+    ArticleSearchResultsComponent,
+    SearchResultItemComponent,
+    OrderByFilterComponent,
+    StockInfosPipe,
+    SearchResultItemLoadingComponent,
+  ],
   providers: [],
 })
 export class SearchResultsModule {}