✨ skeletons added to websites page

Author: marcode24

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

@@ -4,11 +4,15 @@ import { environment } from 'environments/environment';
 import { HttpClient } from '@angular/common/http';
 
 import { ILogin } from '@interfaces/login.interface';
+import { IModalAuth } from '@interfaces/modal.interface';
 import { IResponseLogin } from '@interfaces/response.interface';
+
 import Storage from "@utils/storage.util";
+
 import { User } from '@models/user.model';
+
 import { SettingService } from './setting.service';
-import { IModalAuth } from '@interfaces/modal.interface';
+
 
 const base_url = environment.base_url;
 

src/app/features/website/pages/websites/websites.component.html

@@ -1,23 +1,29 @@
-<section class="websites-section" *ngIf="websites">
+<section class="websites-section">
   <div class="title-wrapper">
     <span class="title-section">Websites availables</span>
   </div>
-
   <div class="websites-wrapper">
-    <div class="card card-website" *ngFor="let website of websites">
-      <figure>
-        <img [src]="website.image" alt="website-image" onerror="this.src='/assets/images/not-found-image.jpg'">
-      </figure>
-      <div class="card-body">
-        <div class="website-title">
-          <span class="title">{{website.name}}</span>
-          <button (click)="subscribeWebsite(website._id)" [class.btn-following]="website.inUser"
-            class="btn btn-primary btn-subscribe">{{ (website.inUser) ?
-            'Following' : 'Subscribe' }}</button>
-        </div>
-        <p class="w-desc">{{website.description}}</p>
-        <div class="link">
-          <a [href]="website.link" target="_blank" class="w-link">View original site</a>
+    <div class="skeletons" *ngIf="isLoading">
+      <app-card-new></app-card-new>
+      <app-card-new></app-card-new>
+      <app-card-new></app-card-new>
+    </div>
+    <div *ngIf="!isLoading">
+      <div class="card card-website" *ngFor="let website of websites">
+        <figure>
+          <img [src]="website.image" alt="website-image" onerror="this.src='/assets/images/not-found-image.jpg'">
+        </figure>
+        <div class="card-body">
+          <div class="website-title">
+            <span class="title">{{website.name}}</span>
+            <button (click)="subscribeWebsite(website._id)" [class.btn-following]="website.inUser"
+              class="btn btn-primary btn-subscribe">{{ (website.inUser) ?
+              'Following' : 'Subscribe' }}</button>
+          </div>
+          <p class="w-desc">{{website.description}}</p>
+          <div class="link">
+            <a [href]="website.link" target="_blank" class="w-link">View original site</a>
+          </div>
         </div>
       </div>
     </div>

src/app/features/website/pages/websites/websites.component.ts

@@ -1,8 +1,10 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnDestroy, OnInit } from '@angular/core';
+import { debounceTime, Subject, Subscription } from 'rxjs';
 
 import { WebsiteService } from '@services/website.service';
 
 import { Website } from '@models/website.model';
+
 import { AuthService } from '@services/auth.service';
 import { UserService } from '@services/user.service';
 
@@ -11,36 +13,49 @@ import { UserService } from '@services/user.service';
   templateUrl: './websites.component.html',
   styleUrls: ['./websites.component.css']
 })
-export class WebsitesComponent implements OnInit {
+export class WebsitesComponent implements OnInit, OnDestroy {
 
   public websites: Website[];
-  private isAuthenticated: boolean;
+  private websiteSub: Subscription;
+  private loadingWebsites: Subject<boolean> = new Subject();
+  public isLoading: boolean = false;
 
   constructor(
     private websiteService: WebsiteService,
     private authService: AuthService,
     private userService: UserService
-  ) { }
+  ) {
+    this.isLoading = true;
+    this.loadingWebsites.pipe(debounceTime(1000)).subscribe(() => this.getWebsites());
+  }
+
+  ngOnDestroy(): void {
+    this.websiteSub.unsubscribe();
+  }
 
   ngOnInit(): void {
-    this.isAuthenticated = this.authService.isAuthenticated();
-    this.getWebsites();
+    this.loadingWebsites.next(true);
+    this.websiteSub = this.authService.isAuthenticatedEmitter.subscribe(({isAuth}) =>{
+      if(isAuth) {
+        this.isLoading = true;
+        this.loadingWebsites.next(true);
+      }
+    });
   }
 
   getWebsites(): void {
     this.websiteService.getWebsites(true).subscribe({
       next: (websites) => {
         this.websites = websites;
-        console.log(this.websites);
       },
-      error: (e) => {
-        console.log(e);
+      complete: () => {
+        this.isLoading = false;
       }
     })
   }
 
   subscribeWebsite(id: string){
-    if(!this.isAuthenticated) {
+    if(!this.authService.isAuthenticated()) {
       return this.authService.showModalAuth('init');
     }
     this.userService.modifyPreferences(id, 'subscription').subscribe(resp => {

src/app/features/website/website.module.ts

@@ -1,15 +1,17 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { WebsitesComponent } from './pages/websites/websites.component';
 
+import { WebsitesComponent } from './pages/websites/websites.component';
 
+import { SkeletonsModule } from 'app/shared/skeletons/skeletons.module';
 
 @NgModule({
   declarations: [
     WebsitesComponent
   ],
   imports: [
-    CommonModule
+    CommonModule,
+    SkeletonsModule
   ]
 })
 export class WebsiteModule { }