(feat) : Add Skeleton Animation Profile

angular.json

@@ -120,5 +120,8 @@
  }
  }
  }
+ },
+ "cli": {
+ "analytics": false
  }
 }

src/app/app-routing.module.ts

@@ -14,9 +14,6 @@ const routes: Routes = [
  children: [
  {
  path: '',
- data: {
- role: [...ALL_ROLES],
- },
  loadChildren: () =>
  import('../app/pages/public/public.module').then(
  (m) => m.PublicModule
@@ -44,10 +41,10 @@ const routes: Routes = [
  },
  ],
  },
- {
- path: '**',
- redirectTo: '',
- },
+ // {
+ //  path: '**',
+ //  redirectTo: '',
+ // },
 ];
 
 @NgModule({

src/app/pages/public/landing/components/carrousel/carrousel.component.html

@@ -8,12 +8,10 @@
  <div>
  <div>
  <h1 class="text-4xl font-bold tracking-tight sm:text-center sm:text-6xl text-gray-300">
- Awesome
- Scrapper
- Mangas
+ Mejores Precios Mangas
  </h1>
- <p class="mt-6 text-lg leading-8 sm:text-center text-white">Awesome PWA Web App Build
- with Angular & NestJS</p>
+ <p class="mt-6 text-lg leading-8 sm:text-center text-white">Comparamos miles de
+ productos por usted</p>
  <div class="mt-8 flex gap-x-4 sm:justify-center">
  <button [routerLink]="['search-book']"
  class="inline-block rounded-lg bg-indigo-600 px-4 py-1.5 text-base font-semibold leading-7 text-white shadow-sm ring-1 ring-indigo-600 hover:bg-indigo-700 hover:ring-indigo-700">
@@ -36,9 +34,7 @@ <h1 class="text-4xl font-bold tracking-tight sm:text-center sm:text-6xl text-gra
  <div class="slider-contain"
  style="width: 100%; height: 90vh; ; display: flex; align-items: center;">
  <p class="mt-6 text-lg leading-8 text-gray-600 sm:text-center dark:text-white"
- style="padding: 25%;">Awesome
- PWA Web App Build
- with Angular & NestJS</p>
+ style="padding: 25%;">Comparamos precios de las principales tiendas</p>
  </div>
  </div>
  </div>

src/app/pages/public/landing/landing.component.html

@@ -1,4 +1,3 @@
-<!-- (mousewheel)="handleScroll($event)" (scroll)="handleScroll($event)" (scroll)="handleScroll($event)" (touchmove)="handleScroll($event)" -->
 <app-carrousel></app-carrousel>
 
 <ng-container>

src/app/pages/public/public.routing.ts

@@ -1,6 +1,5 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
-import { ALL_ROLES } from '../../core/constants';
 
 export const publicRoutes: Routes = [
  {
@@ -24,7 +23,7 @@ export const publicRoutes: Routes = [
  path: '',
  loadChildren: () =>
  import('../public/landing/landing.module').then((m) => m.LandingModule),
- },
+ } 
 ];
 
 @NgModule({

src/app/pages/public/search-book/components/book-detail/book-detail.component.html

@@ -70,11 +70,11 @@ <h1 class="text-gray-900 text-3xl title-font font-medium mb-4 dark:text-gray-200
 
 <ng-template #loadingContent>
  <ngx-skeleton-loader style=" margin-top: 2.3em;"
- class="lg:w-1/2 w-full lg:pr-10 lg:py-6 lg:mr-6 mb-6 lg:mb-0 search-book-skeleton" count="5"
+ class="lg:w-1/2 w-full lg:pr-10 lg:py-6 lg:mr-6 mb-6 lg:mb-0 detail-book-skeleton" count="5"
  animation="progress" [theme]="{height: '50px'}">
  </ngx-skeleton-loader>
  <ngx-skeleton-loader count="1" appearance="circle" animation="pulse"
- class="search-book-skeleton lg:w-1/3 w-full lg:h-auto h-64 object-cover object-center rounded lg:ml-6" [theme]="{
+ class="detail-book-skeleton  lg:w-1/3 w-full lg:h-auto h-64 object-cover object-center rounded lg:ml-6" [theme]="{
  'width': '24rem',
  'height': '34rem',
  'border-radius': '10px',

src/app/pages/public/search-book/components/book-detail/book-detail.component.ts

@@ -47,8 +47,7 @@ export class BookDetailComponent implements OnInit {
  this.isContentLoaded = true;
  this.listBookDetails = res;
  this.filterData();
- },
- error: (_err) => {},
+ }
  });
  }
 

src/app/pages/public/search-book/search-book.component.html

@@ -1,23 +1,20 @@
 <section class="text-gray-600 body-font" [formGroup]="searchBookForm">
  <div class="mx-auto max-w-2xl py-16 px-4 sm:py-24 sm:px-6 lg:max-w-7xl lg:px-8">
 
- <div class="flex w-full justify-center items-end">
- <div class="relative mr-4 lg:w-full xl:w-full md:w-full text-left">
- <input type="text" placeholder="Busca por ISBN o Titulo" formControlName="search"
- class="w-full bg-gray-100 bg-opacity-50 rounded focus:ring-2 focus:ring-indigo-200 focus:bg-transparent border border-gray-300 focus:border-indigo-500 text-base outline-none text-gray-700 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out dark:text-gray-500">
- </div>
-
 
- <div class="flex ml-6 items-center">
- <div class="relative">
- <select formControlName="order"
- class="rounded border appearance-none border-gray-300 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-200 focus:border-indigo-500 text-base pl-3 pr-10">
- <option [value]="1">Menor Precio</option>
- <option [value]="-1">Mayor Precio</option>
- </select>
- </div>
+ <div class="flex w-full justify-center items-end max-md:flex-wrap">
+ <div class="flex relative md:mr-4 lg:w-full max-md:ml-3 max-md:mr-3 xl:w-full md:w-full text-left w-full ">
+ <input type="search" placeholder="Busca por ISBN o Titulo" formControlName="search"
+ class="w-full bg-gray-100 bg-opacity-50 rounded focus:ring-2 focus:ring-indigo-200 focus:bg-transparent border border-gray-300 focus:border-indigo-500 text-base outline-none text-gray-700 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out dark:text-gray-500 dark:focus:text-white">
  </div>
 
+ <div class="flex items-center max-md:pt-4 max-md:ml-3 max-md:mr-3 max-md:w-full ">
+ <select formControlName="order"
+ class="max-md:w-full rounded border appearance-none border-gray-300 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-200 focus:border-indigo-500 text-base pl-3 pr-10">
+ <option [value]="1">Menor Precio</option>
+ <option [value]="-1">Mayor Precio</option>
+ </select>
+ </div>
  </div>
 
 
@@ -31,9 +28,13 @@
 <app-books *ngIf="isContentLoaded ; else contentLoad " [listBooks]="listBooks" [paginationMeta]="paginationMeta"
  (pageChange)="onPageChange($event)"></app-books>
 
-<div class="mx-auto max-w-2xl py-16 px-4 sm:py-24 sm:px-6 lg:max-w-7xl lg:px-8" *ngIf="isContentLoaded && paginationMeta?.pageCount == 0 ">
- <div class="text-center">
- <p class="text-3xl font-bold tracking-tight text-gray-400 sm:text-4xl"> No hay resultado para su busqueda </p>
+
+<div class="flex justify-center items-center text-center flex-wrap h-full g-6 text-gray-800"
+ *ngIf="isContentLoaded && paginationMeta?.pageCount == 0 ">
+ <div class="md:w-8/12 lg:w-6/12 mb-12 md:mb-0 pt-16">
+ <p class="text-gray-600 dark:text-gray-300">No se encontro resultados para su busqueda , vuelta intentarlo</p>
+ <img src="assets/images/nothing.svg" class="w-full" alt="People illustrations" />
+
  </div>
 </div>
 

src/app/pages/public/search-book/search-book.component.ts

@@ -1,7 +1,7 @@
-import { Component, OnDestroy, OnInit } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { FormBuilder, FormGroup } from '@angular/forms';
 import { debounceTime, distinctUntilChanged } from 'rxjs';
-import { QUERY_PARAMS_PAGINATON } from '@core/constants/constant';
+import { QUERY_PARAMS_PAGINATON } from '@core/constants';
 import {
  Book,
  PaginationMetaParams,
@@ -14,17 +14,14 @@ import { BookService } from '@core/services';
  templateUrl: './search-book.component.html',
  styleUrls: ['./search-book.component.scss'],
 })
-export class SearchBookComponent implements OnInit , OnDestroy {
+export class SearchBookComponent implements OnInit {
  searchBookForm: FormGroup;
  isContentLoaded: boolean = false;
 
  queryParams: QueryParamsPagination = QUERY_PARAMS_PAGINATON;
  paginationMeta: PaginationMetaParams;
  listBooks: Book[] = [];
  constructor(private fb: FormBuilder, private bookService: BookService) {}
- ngOnDestroy(): void {
- console.log('ngOnDestroy');
- }
 
  ngOnInit(): void {
  this.createFormSearchBook();
@@ -65,10 +62,6 @@ export class SearchBookComponent implements OnInit , OnDestroy {
  this.listBooks = data;
  this.paginationMeta = meta;
  this.isContentLoaded = true;
- console.log('My Books Query is', data);
- },
- error: (_err) => {
- console.log('error is ', _err);
  },
  });
  }

src/app/pages/user/list-wish/list-wish.component.html

@@ -110,7 +110,7 @@ <h1 class="text-4xl font-semibold leading-9 text-gray-800 dark:text-white">List
 
 
 <ng-template #loadingContent>
- <ngx-skeleton-loader class="flex flex-col items-center search-book-skeleton pt-16" count="5" animation="progress"
+ <ngx-skeleton-loader class="flex flex-col items-center detail-book-skeleton pt-16" count="5" animation="progress"
  [theme]="{height: '150px', width : '75%' }">
  </ngx-skeleton-loader>
 </ng-template>
@@ -120,10 +120,10 @@ <h1 class="text-4xl font-semibold leading-9 text-gray-800 dark:text-white">List
  <div class="md:w-8/12 lg:w-6/12 mb-12 md:mb-0 pt-16">
  <p class="text-gray-600 dark:text-gray-300"> Aún no tienes deseos , agrega algunos</p>
  <img src="assets/images/not-found-wish.svg" class="w-full" alt="People illustrations" />
- <small><a href="https://storyset.com/phone" class="text-gray-500 dark:text-gray-300" rel="noopener noreferrer"
- aria-label="People illustrations by Storyset" target="_blank">People illustrations by
+ <small><a href="https://storyset.com/phone" class="text-gray-500 dark:text-gray-300"
+ rel="noopener noreferrer" aria-label="People illustrations by Storyset" target="_blank">People
+ illustrations by
  Storyset</a></small>
  </div>
- <!-- <p class="text-xl font-bold tracking-tight text-gray-300 sm:text-3xl pt-16"> Aún no tiene ningún deseo </p> -->
  </div>
 </ng-template>

src/app/pages/user/profile/profile.component.html

@@ -1,4 +1,5 @@
-<div class="w-full px-6 py-6 mx-auto loopple-min-height-78vh text-slate-500 pt-12 mt-12">
+<div class="w-full px-6 py-6 mx-auto loopple-min-height-78vh text-slate-500 pt-12 mt-12"
+ *ngIf="isLoadingContent ; else loadingContent; ">
  <div
  class="relative flex flex-col flex-auto min-w-0 p-5 overflow-hidden break-words lg:m-4 lg:ml-6 lg:p-6 shadow-blur rounded-2xl bg-slate-100 dark:bg-slate-800">
  <div class="flex flex-wrap">
@@ -56,4 +57,11 @@ <h6 class="font-bold leading-tight uppercase text-size-xs text-slate-500">Datos<
  </div>
  </div>
  </div>
-</div>
+</div>
+
+
+<ng-template #loadingContent>
+ <ngx-skeleton-loader class="flex flex-col items-center detail-book-skeleton pt-16" count="2" animation="progress"
+ [theme]="{height: '235px', width : '85%' , margin :'3.1%' , 'border-radius': '15px'}">
+ </ngx-skeleton-loader>
+</ng-template>

src/app/pages/user/profile/profile.component.ts

@@ -10,7 +10,9 @@ import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 })
 export class ProfileComponent implements OnInit {
  profileForm: FormGroup;
- getPhoto : string = null;
+ getPhoto: string = null;
+ isLoadingContent: boolean = false;
+
  constructor(
  private toastService: ToastrService,
  private userService: UserService,
@@ -23,10 +25,12 @@ export class ProfileComponent implements OnInit {
  }
 
  getProfile() {
+ this.isLoadingContent = false;
  this.userService.getProfile().subscribe({
  next: (res) => {
  this.profileForm.patchValue(res);
- this.getPhoto = res.image
+ this.getPhoto = res.image;
+ this.isLoadingContent = true;
  },
  });
  }

src/app/pages/user/profile/profile.module.ts

@@ -7,6 +7,7 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { ProfileOptionsComponent } from './components/profile-options/profile-options.component';
 import { ProfilePhotoComponent } from './components/profile-photo/profile-photo.component';
 import { SweetAlert2Module } from '@sweetalert2/ngx-sweetalert2';
+import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 
 
 @NgModule({
@@ -19,6 +20,7 @@ import { SweetAlert2Module } from '@sweetalert2/ngx-sweetalert2';
  CommonModule,
  FormsModule,
  SweetAlert2Module,
+ NgxSkeletonLoaderModule,
  ReactiveFormsModule,
  ProfileRoutingModule
  ]

src/app/shared/common/footer/footer.component.html

@@ -2,11 +2,7 @@
  <div class="container px-5 py-8 mx-auto flex items-center sm:flex-row flex-col">
  <a class="flex title-font font-medium items-center md:justify-start justify-center text-gray-900"
  href="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/SkyZeroZx" rel="noopener noreferrer" target="_blank">
- <svg xmlns="http:https://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round"
- stroke-linejoin="round" stroke-width="2" class="w-10 h-10 text-white p-2 bg-indigo-500 rounded-full"
- viewBox="0 0 24 24">
- <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"></path>
- </svg>
+ <img class="w-12 h-12 text-white p-2 rounded-full" src="assets/images/logo.svg" />
  <span class="ml-3 text-xl text-indigo-500">Sky Scrapper</span>
  </a>
  <p class="text-sm text-indigo-500 sm:ml-4 sm:pl-4 sm:border-l-2 sm:border-gray-200 sm:py-2 sm:mt-0 mt-4">© {{ date |

src/styles.scss

@@ -61,6 +61,17 @@ body {
 
 .dark {
  .search-book-skeleton {
+ span {
+ background-color: #20293a !important;
+ border: 1px solid #20293a !important;
+ color: black;
+ @media not all and (min-width: 768px) {
+ margin-left: 3.45em !important;
+ }
+ }
+ }
+
+ .detail-book-skeleton {
  span {
  background-color: #20293a !important;
  border: 1px solid #20293a !important;
@@ -84,4 +95,4 @@ body {
  }
  }
  }
-}
+}