✨ loading skeletons added

Author: marcode24

src/app/core/components/sidebar/sidebar.component.css

@@ -246,6 +246,8 @@ nav .profile {
     bottom: 0;
     transition: none;
     background: var(--bg-color);
+    border-right: none;
+    border-top: 1px solid #a5a5a5;
   }
 
   nav .profile,

src/app/core/services/feed.service.ts

@@ -35,16 +35,7 @@ export class FeedService {
     };
   }
 
-  get getRecentsFeeds(): Feed[] {
-    return this.recentFeeds;
-  }
-
-  setRecentsFeeds(feeds: Feed[]): void {
-    this.recentFeeds = feeds;
-  }
-
   getFeeds(skip = 0, limit = 10, isAuthenticated: boolean = false): Observable<Feed[]> {
-
     const url = (!isAuthenticated) ?
     `${base_url}/feed?skip=${skip}&limit=${limit}` :
     `${base_url}/feed/byUser/subscription?skip=${skip}&limit=${limit}`;

src/app/features/feed/feed.module.ts

@@ -1,20 +1,25 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { FeedComponent } from './pages/feed/feed.component';
+
 import { HtmlPipe } from 'app/core/pipes/html.pipe';
-import { SavedComponent } from './pages/saved/saved.component';
 
+import { SkeletonsModule } from 'app/shared/skeletons/skeletons.module';
 import { SharedModule } from 'app/shared/shared.module';
 
+import { SavedComponent } from './pages/saved/saved.component';
+import { FeedComponent } from './pages/feed/feed.component';
+
+
 @NgModule({
   declarations: [
     FeedComponent,
     SavedComponent,
-    HtmlPipe,
+    HtmlPipe
   ],
   imports: [
     CommonModule,
-    SharedModule
+    SharedModule,
+    SkeletonsModule
   ]
 })
 export class FeedModule { }

src/app/features/feed/pages/feed/feed.component.css

@@ -2,14 +2,17 @@
   display: grid;
   grid-template-columns: auto 300px;
   gap: 0.5rem;
-  padding-top: 1rem;
 }
 
 .feed-wrapper .findings {
   width: 300px;
   opacity: 1;
 }
 
+.card.news-detail {
+  margin: 1rem;
+}
+
 .card.card-findings {
   cursor: default;
   opacity: 1;

src/app/features/feed/pages/feed/feed.component.html

@@ -20,7 +20,7 @@
   <div class="findings">
     <div class="card card-findings">
       <span class="card-title">Recents</span>
-      <div class="item" *ngFor="let recentFeed of recentsFeed">
+      <div (click)="goToFeed(recentFeed._id)" class="item" *ngFor="let recentFeed of recentsFeed">
         <div class="item-content">
           <span class="title">{{recentFeed.title | slice:0:35}}{{(recentFeed.title.length > 20)?'...':'' }}</span>
           <span class="writer">{{recentFeed.writer}}</span>

src/app/features/feed/pages/feed/feed.component.ts

@@ -1,9 +1,10 @@
 import { Component, OnInit, ViewEncapsulation } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
+import { ActivatedRoute, Router } from '@angular/router';
 
 import { FeedService } from '@services/feed.service';
 
 import { Feed } from '@models/feed.model';
+import { forkJoin } from 'rxjs';
 // use encapsulation to styles works correctly from css files
 @Component({
   selector: 'app-feed',
@@ -14,21 +15,34 @@ import { Feed } from '@models/feed.model';
 export class FeedComponent implements OnInit {
   public feed: Feed;
   public recentsFeed: Feed[];
+  public isLoading: boolean = true;
 
   constructor(
     private activatedRoute: ActivatedRoute,
     private feedService: FeedService,
+    private router: Router
   ) { }
 
   ngOnInit(): void {
-    this.recentsFeed = this.feedService.getRecentsFeeds;
-    this.activatedRoute.params.subscribe(({ feedID }) => this.getFeed(feedID));
+    this.activatedRoute.params.subscribe(({ feedID }) => this.loadData(feedID));
   }
 
-  getFeed(id: string): void {
-    this.feedService.getFeed(id).subscribe((feed: Feed) => {
-      this.feed = feed;
+  loadData(id: string): void {
+    this.isLoading = true;
+    forkJoin({
+      feed: this.feedService.getFeed(id),
+      recentFeeds: this.feedService.getFeeds(0, 6, false),
+    }).subscribe({
+      next: ({ feed, recentFeeds }) => {
+        this.feed = feed,
+        this.recentsFeed = recentFeeds;
+      },
+      complete: () => this.isLoading = false,
     })
   }
 
+  goToFeed(id: string): void {
+    this.router.navigate([`/feed/${id}`]);
+  }
+
 }

src/app/features/feed/pages/saved/saved.component.html

@@ -3,6 +3,11 @@
     <span class="title-section">Saved</span>
   </div>
   <div class="news-container">
-    <app-news-container [feeds]="feeds" *ngIf="feeds" (moreItems)="onScroll()"></app-news-container>
+    <div class="skeletons" *ngIf="isLoading">
+      <app-card-new></app-card-new>
+      <app-card-new></app-card-new>
+      <app-card-new></app-card-new>
+    </div>
+    <app-news-container [feeds]="feeds" *ngIf="!isLoading" (moreItems)="onScroll()"></app-news-container>
   </div>
 </section>

src/app/features/feed/pages/saved/saved.component.ts

@@ -1,7 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import { Feed } from '@models/feed.model';
 import { FeedService } from '@services/feed.service';
-import { map, Observable } from 'rxjs';
+import { debounceTime, map, Observable, Subject } from 'rxjs';
 
 @Component({
   selector: 'app-saved',
@@ -12,14 +12,24 @@ export class SavedComponent implements OnInit {
   private skip: number = 0;
   private limit: number = 10;
   public feeds: Feed[];
+  public isLoading: boolean = true;
+  private loadingNews: Subject<boolean> = new Subject();
+
   constructor(
     private feedService: FeedService,
-  ) { }
+  ) {
+    this.loadingNews.pipe(debounceTime(2000)).subscribe(() => this.getFeedsSaved());
+  }
 
   ngOnInit(): void {
-    this.getSavedFeeds().subscribe(feeds => {
-      console.log(feeds);
-      this.feeds = feeds
+    this.loadingNews.next(true);
+  }
+
+  getFeedsSaved() {
+    this.isLoading = true;
+    this.getSavedFeeds().subscribe({
+      next: (feeds) => this.feeds = feeds,
+      complete: () => this.isLoading = false,
     });
   }
 

src/app/features/home/components/websites-card/websites-card.component.css

@@ -7,7 +7,7 @@
   max-width: 300px;
   display: flex;
   flex-direction: column;
-  transform: translate(0, 65px);
+  transform: translate(0, 78px);
 }
 
 .card.card-websites .card-title {

src/app/features/home/home.component.css

@@ -9,6 +9,10 @@
   opacity: 1;
 }
 
+.skeletons {
+  margin-top: 0.5rem;
+}
+
 @media (max-width: 1200px) {
   .home-section .recently .news {
     grid-template-columns: repeat(1, 100%);