Merged in development (pull request #62)

Display loading on home screen

src/app/core/store/state/feed.state.ts

@@ -8,41 +8,51 @@ import { FeedMapping } from 'src/app/core/mappings/feed.mapping';
 import { PagedApiResponse } from 'projects/feed-service/src/lib';
 
 export class FeedStateModel {
-    feed: FeedCard[];
+  feed: FeedCard[];
+  loading: boolean;
 }
 
 @State<FeedStateModel>({
-    name: 'feed',
-    defaults: {
-        feed: []
-    }
+  name: 'feed',
+  defaults: {
+    loading: false,
+    feed: []
+  }
 })
 export class FeedState {
+  constructor(
+    private feedService: FeedService,
+    private feedMapping: FeedMapping
+  ) {}
 
-    constructor(private feedService: FeedService, private feedMapping: FeedMapping) { }
+  @Selector()
+  static getFeed(state: FeedStateModel) {
+    return [...state.feed, feedMock[3]];
+  }
 
-    @Selector()
-    static getFeed(state: FeedStateModel) {
-        return [ ...state.feed, feedMock[3]];
-    }
+  @Selector()
+  static loading(state: FeedStateModel) {
+    return state.loading;
+  }
 
-    @Action(LoadFeed)
-    load(ctx: StateContext<FeedStateModel>) {
-        const state = ctx.getState();
-        this.feedService.info().subscribe(
-            (feed: PagedApiResponse<FeedDTO<any>>) => {
-                const feeds = feed.result.map(t =>
-                    this.feedMapping.fromFeedDTO(t)
-                );
-                ctx.patchState({
-                    ...state,
-                    feed: [...feeds]
-                });
-            }
-        );
-        // ctx.patchState({
-        //     ...state,
-        //     feed: [...feedMock]
-        // });
-    }
+  @Action(LoadFeed)
+  load(ctx: StateContext<FeedStateModel>) {
+    const state = ctx.getState();
+    ctx.patchState({
+      loading: true
+    });
+    this.feedService
+      .info()
+      .subscribe((feed: PagedApiResponse<FeedDTO<any>>) => {
+        const feeds = feed.result.map(t => this.feedMapping.fromFeedDTO(t));
+        ctx.patchState({
+          loading: false,
+          feed: [...feeds]
+        });
+      });
+    // ctx.patchState({
+    //     ...state,
+    //     feed: [...feedMock]
+    // });
+  }
 }

src/app/modules/dashboard/dashboard.component.html

@@ -1,14 +1,22 @@
-<div *ngFor="let card of (feed$ | async)">
-  <app-book-card *ngIf="card.type === 'products'" [card]="card"></app-book-card>
-  <app-event-card *ngIf="card.type === 'events'" [card]="card"></app-event-card>
-  <app-news-card *ngIf="card.type === 'info'" [card]="card"></app-news-card>
-  <app-recommandation-card
-    *ngIf="card.type === 'REC'"
-    [card]="card"
-  ></app-recommandation-card>
+<div [@stagger]="(feed$ | async).length">
+  <div *ngFor="let card of (feed$ | async)" class="card">
+    <app-book-card
+      *ngIf="card.type === 'products'"
+      [card]="card"
+    ></app-book-card>
+    <app-event-card
+      *ngIf="card.type === 'events'"
+      [card]="card"
+    ></app-event-card>
+    <app-news-card *ngIf="card.type === 'info'" [card]="card"></app-news-card>
+    <app-recommandation-card
+      *ngIf="card.type === 'REC'"
+      [card]="card"
+    ></app-recommandation-card>
+  </div>
 </div>
 <app-loading
-  *ngIf="loading"
-  loading="true"
+  [loading]="loading$ | async"
   text="Inhalte werden geladen"
+  class="loading"
 ></app-loading>

src/app/modules/dashboard/dashboard.component.scss

@@ -0,0 +1,9 @@
+.card {
+  display: block;
+}
+
+.loading {
+  position: absolute;
+  top: 400px;
+  width: 100%;
+}

src/app/modules/dashboard/dashboard.component.ts

@@ -4,25 +4,20 @@ import { Store, Select } from '@ngxs/store';
 import { FeedCard } from 'src/app/core/models/feed-card.model';
 import { LoadFeed } from 'src/app/core/store/actions/feed.actions';
 import { FeedState } from 'src/app/core/store/state/feed.state';
+import { staggerAnimation } from './stagger.animation';
 
 @Component({
   selector: 'app-dashboard',
   templateUrl: './dashboard.component.html',
-  styleUrls: ['./dashboard.component.scss']
+  styleUrls: ['./dashboard.component.scss'],
+  animations: [staggerAnimation]
 })
 export class DashboardComponent implements OnInit {
-
-  loading = true;
-
+  @Select(FeedState.loading) loading$: Observable<boolean>;
   @Select(FeedState.getFeed) feed$: Observable<FeedCard[]>;
-  constructor(
-    private store: Store
-  ) { }
+  constructor(private store: Store) {}
 
   ngOnInit() {
     this.store.dispatch(new LoadFeed());
-    this.feed$.subscribe(
-      () => this.loading = false
-    );
   }
 }

src/app/modules/dashboard/stagger.animation.ts

@@ -0,0 +1,21 @@
+import {
+  trigger,
+  transition,
+  stagger,
+  animate,
+  style,
+  query
+} from '@angular/animations';
+
+export const staggerAnimation = trigger('stagger', [
+  transition('* => *', [
+    query(
+      '*',
+      [
+        style({ opacity: 0 }),
+        stagger(10, [animate(200, style({ opacity: 1 }))])
+      ],
+      { optional: true }
+    )
+  ])
+]);