refactor(wdc-2023): skeleton

trungvose · May 26, 2023 · a4c2fe9 · a4c2fe9
1 parent 4f04751
commit a4c2fe9
Show file tree

Hide file tree

Showing 18 changed files with 79 additions and 79 deletions.
diff --git a/apps/angular-spotify/src/styles.scss b/apps/angular-spotify/src/styles.scss
@@ -5,7 +5,6 @@
 
 @use 'ng-zorro-antd/style/index.min.css' as *;
 @use 'ng-zorro-antd/slider/style/index.min.css' as slide;
-@use 'ng-zorro-antd/skeleton/style/index.min.css' as skeleton;
 @use 'ng-zorro-antd/switch/style/index.min.css' as switch;
 @use 'ng-zorro-antd/modal/style/index.min.css' as modal;
 @use 'ng-zorro-antd/button/style/index.min.css' as button;
@@ -25,10 +24,6 @@ body {
   @apply h-full w-full absolute overflow-hidden flex flex-col bg-black text-white/70;
 }
 
-.tracks-container .ant-skeleton-paragraph>li {
-  height: 24px !important;
-}
-
 a, button {
   &:focus-visible {
     @apply outline outline-2 outline-white outline-offset-2;

diff --git a/libs/web/album/feature/detail/src/lib/album.component.html b/libs/web/album/feature/detail/src/lib/album.component.html
@@ -33,8 +33,7 @@
 
   <div class="px-8 mb-5 album-loading"
        *ngIf="isAlbumLoading$ | async">
-    <as-tracks-loading [avatar]="true"
-                       [title]="true">
+    <as-tracks-loading [avatar]="true">
     </as-tracks-loading>
   </div>
-</div>
+</div>
diff --git a/libs/web/album/feature/detail/src/lib/album.component.scss b/libs/web/album/feature/detail/src/lib/album.component.scss
diff --git a/libs/web/album/feature/detail/src/lib/album.component.ts b/libs/web/album/feature/detail/src/lib/album.component.ts
@@ -4,7 +4,13 @@ import { AlbumStore } from '@angular-spotify/web/album/data-access';
 @Component({
   selector: 'as-album',
   templateUrl: './album.component.html',
-  styleUrls: ['./album.component.scss'],
+  styles: [
+    `
+      :host {
+        display: block;
+      }
+    `
+  ],
   providers: [AlbumStore],
   changeDetection: ChangeDetectionStrategy.OnPush
 })

diff --git a/libs/web/album/feature/detail/src/lib/album.module.ts b/libs/web/album/feature/detail/src/lib/album.module.ts
@@ -2,7 +2,7 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { AlbumComponent } from './album.component';
 import { RouterModule } from '@angular/router';
-import { TracksLoadingModule } from '@angular-spotify/web/shared/ui/tracks-loading';
+import { TracksLoadingComponent } from '@angular-spotify/web/shared/ui/tracks-loading';
 import { MediaSummaryModule } from '@angular-spotify/web/shared/ui/media-summary';
 import { PlayButtonModule } from '@angular-spotify/web/shared/ui/play-button';
 import { MediaTableModule } from '@angular-spotify/web/shared/ui/media-table';
@@ -11,7 +11,7 @@ import { AlbumTrackModule } from '@angular-spotify/web/album/ui/album-track';
 @NgModule({
   imports: [
     CommonModule,
-    TracksLoadingModule,
+    TracksLoadingComponent,
     MediaSummaryModule,
     PlayButtonModule,
     MediaTableModule,

diff --git a/libs/web/artist/feature/src/lib/artist.component.html b/libs/web/artist/feature/src/lib/artist.component.html
@@ -9,7 +9,7 @@
     </as-media-summary>
 
     <div class="px-8 mb-5" *ngIf="isArtistLoading$ | async">
-      <as-tracks-loading [avatar]="true" [title]="true" [rows]="2"> </as-tracks-loading>
+      <as-tracks-loading [avatar]="true"> </as-tracks-loading>
     </div>
 
     <as-artist-top-tracks></as-artist-top-tracks>

diff --git a/libs/web/artist/feature/src/lib/artist.module.ts b/libs/web/artist/feature/src/lib/artist.module.ts
@@ -5,7 +5,7 @@ import { WorkInProgressModule } from '@angular-spotify/web/shared/ui/work-in-pro
 import { RouterModule } from '@angular/router';
 import { RouterUtil } from '@angular-spotify/web/shared/utils';
 import { MediaSummaryModule } from '@angular-spotify/web/shared/ui/media-summary';
-import { TracksLoadingModule } from '@angular-spotify/web/shared/ui/tracks-loading';
+import { TracksLoadingComponent } from '@angular-spotify/web/shared/ui/tracks-loading';
 import { ArtistTopTracksModule } from '@angular-spotify/web/artist/ui/artist-top-tracks';
 @NgModule({
   imports: [
@@ -18,7 +18,7 @@ import { ArtistTopTracksModule } from '@angular-spotify/web/artist/ui/artist-top
       }
     ]),
     MediaSummaryModule,
-    TracksLoadingModule,
+    TracksLoadingComponent,
     ArtistTopTracksModule
   ],
   declarations: [ArtistComponent],

diff --git a/libs/web/playlist/feature/detail/src/lib/playlist.component.html b/libs/web/playlist/feature/detail/src/lib/playlist.component.html
@@ -34,7 +34,7 @@
   <div class="mb-8" *ngIf="tracks$ | async as tracks">
     <ng-container *ngFor="let item of tracks.items; let idx = index">
       <as-playlist-track
-        *ngIf="item.track"      
+        *ngIf="item.track"
         [item]="item"
         [index]="idx"
         [contextUri]="getPlaylistContextUri(playlistId$ | async)"
@@ -45,8 +45,8 @@
   </div>
 </div>
 
-<div class="px-8 mb-5 playlist-loading" *ngIf="isCurrentPlaylistLoading$ | async">
-  <as-tracks-loading [avatar]="true" [title]="true"> </as-tracks-loading>
+<div class="px-8 mb-5" *ngIf="isCurrentPlaylistLoading$ | async">
+  <as-tracks-loading [avatar]="true"> </as-tracks-loading>
 </div>
 
 <div class="px-8" *ngIf="isPlaylistTracksLoading$ | async">

diff --git a/libs/web/playlist/feature/detail/src/lib/playlist.component.scss b/libs/web/playlist/feature/detail/src/lib/playlist.component.scss
@@ -1,7 +1,3 @@
 :host {
   display: block;
 }
-
-.playlist-loading {
-  min-height: 250px;
-}
diff --git a/libs/web/playlist/feature/detail/src/lib/playlist.component.ts b/libs/web/playlist/feature/detail/src/lib/playlist.component.ts
@@ -5,7 +5,13 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
 @Component({
   selector: 'as-playlist',
   templateUrl: './playlist.component.html',
-  styleUrls: ['./playlist.component.scss'],
+  styles: [
+    `
+      :host {
+        display: block;
+      }
+    `
+  ],
   providers: [PlaylistStore],
   changeDetection: ChangeDetectionStrategy.OnPush
 })
@@ -17,9 +23,7 @@ export class PlaylistComponent {
   tracks$ = this.store.tracks$;
   isPlaylistTracksLoading$ = this.store.isPlaylistTracksLoading$;
 
-  constructor(private store: PlaylistStore) {
-
-  }
+  constructor(private store: PlaylistStore) {}
 
   togglePlaylist(isPlaying: boolean) {
     this.store.togglePlaylist({

diff --git a/libs/web/playlist/feature/detail/src/lib/playlist.module.ts b/libs/web/playlist/feature/detail/src/lib/playlist.module.ts
@@ -9,7 +9,7 @@ import { SvgIconsModule } from '@ngneat/svg-icon';
 import { PlaylistComponent } from './playlist.component';
 import { RouterUtil } from '@angular-spotify/web/shared/utils';
 import { LetModule, PushModule } from '@ngrx/component';
-import { TracksLoadingModule } from '@angular-spotify/web/shared/ui/tracks-loading';
+import { TracksLoadingComponent } from '@angular-spotify/web/shared/ui/tracks-loading';
 @NgModule({
   imports: [
     CommonModule,
@@ -19,7 +19,7 @@ import { TracksLoadingModule } from '@angular-spotify/web/shared/ui/tracks-loadi
     PlaylistTrackModule,
     SvgIconsModule,
     LetModule, PushModule,
-    TracksLoadingModule,
+    TracksLoadingComponent,
     RouterModule.forChild([
       {
         path: `:${RouterUtil.Configuration.PlaylistId}`,

diff --git a/libs/web/shared/ui/tracks-loading/src/index.ts b/libs/web/shared/ui/tracks-loading/src/index.ts
@@ -1 +1 @@
-export * from './lib/tracks-loading.module';
+export * from './lib/tracks-loading.component';
diff --git a/libs/web/shared/ui/tracks-loading/src/lib/skeleton.component.ts b/libs/web/shared/ui/tracks-loading/src/lib/skeleton.component.ts
@@ -0,0 +1,10 @@
+import { Component, HostBinding } from '@angular/core';
+
+@Component({
+  selector: 'as-skeleton',
+  template: `<ng-content></ng-content>`,
+  standalone: true
+})
+export class SkeletonComponent {
+  @HostBinding('class') class = 'bg-highlight animate-pulse text-transparent rounded-sm block';
+}
diff --git a/libs/web/shared/ui/tracks-loading/src/lib/tracks-loading.component.html b/libs/web/shared/ui/tracks-loading/src/lib/tracks-loading.component.html
@@ -1,8 +1,12 @@
-<nz-skeleton
-  class="tracks-container"
-  [nzParagraph]="{ rows: rows, width: '100%' }"
-  [nzAvatar]="avatar"
-  [nzTitle]="title"
-  [nzActive]="true"
->
-</nz-skeleton>
+<div *ngIf="avatar" class="flex gap-8">
+  <as-skeleton class="w-32 h-32 flex-shrink-0"></as-skeleton>
+  <div class="flex flex-col flex-1 gap-4">
+    <as-skeleton class="w-full h-6"></as-skeleton>
+    <as-skeleton class="w-full h-10"></as-skeleton>
+    <as-skeleton class="w-full h-6"></as-skeleton>
+  </div>
+</div>
+
+<div *ngIf="!avatar" class="flex flex-col gap-4">
+  <as-skeleton class="w-full h-6" *ngFor="let row of skeletonRows"></as-skeleton>
+</div>
diff --git a/libs/web/shared/ui/tracks-loading/src/lib/tracks-loading.component.ts b/libs/web/shared/ui/tracks-loading/src/lib/tracks-loading.component.ts
@@ -1,12 +1,18 @@
 import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { SkeletonComponent } from './skeleton.component';
+import { NgClass, NgFor, NgIf } from '@angular/common';
 
 @Component({
   selector: 'as-tracks-loading',
   templateUrl: './tracks-loading.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [SkeletonComponent, NgFor, NgClass, NgIf]
 })
 export class TracksLoadingComponent {
+  skeletonRows: number[] = Array.from({ length: 5 });
   @Input() avatar = false;
-  @Input() title = false;
-  @Input() rows = 5;
+  @Input() set rows(value: number) {
+    this.skeletonRows = Array.from({ length: value });
+  }
 }
diff --git a/libs/web/shared/ui/tracks-loading/src/lib/tracks-loading.module.ts b/libs/web/shared/ui/tracks-loading/src/lib/tracks-loading.module.ts
diff --git a/libs/web/tracks/feature/src/lib/tracks.component.html b/libs/web/tracks/feature/src/lib/tracks.component.html
@@ -1,9 +1,11 @@
 <div class="content-spacing">
   <ng-container *ngIf="vm$ | async as vm">
-    <as-media-summary type="Playlist"
-                      [imageUrl]="'https://data.whicdn.com/images/315873335/original.jpg'"
-                      [title]="'Liked Songs'"
-                      [trackCount]="vm.data?.total">
+    <as-media-summary
+      type="Playlist"
+      [imageUrl]="'https://data.whicdn.com/images/315873335/original.jpg'"
+      [title]="'Liked Songs'"
+      [trackCount]="vm.data?.total"
+    >
     </as-media-summary>
 
     <as-media-table-header>
@@ -12,30 +14,26 @@
         <div class="text-xs uppercase ellipsis-one-line">Title</div>
         <div class="text-xs uppercase ellipsis-one-line">Album</div>
         <div class="text-xs uppercase ellipsis-one-line">Date added</div>
-        <svg-icon [key]="'clock'"
-                  title="duration">
-        </svg-icon>
+        <svg-icon [key]="'clock'" title="duration"> </svg-icon>
       </div>
     </as-media-table-header>
 
-
     <div class="mb-8">
       <ng-container *ngFor="let item of vm.data?.items; let idx = index">
-        <as-playlist-track *ngIf="item.track"
-                           type='LIKE_SONGS'
-                           [item]="$any(item)"
-                           [index]="idx"
-                           [contextUri]="item.track.album.uri"
-                           (dblclick)="playTrack(item.track)">
+        <as-playlist-track
+          *ngIf="item.track"
+          type="LIKE_SONGS"
+          [item]="$any(item)"
+          [index]="idx"
+          [contextUri]="item.track.album.uri"
+          (dblclick)="playTrack(item.track)"
+        >
         </as-playlist-track>
       </ng-container>
     </div>
 
-    <div class="px-8 mb-5 album-loading"
-         *ngIf="vm.isLoading">
-      <as-tracks-loading [avatar]="true"
-                         [title]="true">
-      </as-tracks-loading>
+    <div class="px-8 mb-5 album-loading" *ngIf="vm.isLoading">
+      <as-tracks-loading [avatar]="true"> </as-tracks-loading>
     </div>
   </ng-container>
-</div>
+</div>
diff --git a/libs/web/tracks/feature/src/lib/tracks.module.ts b/libs/web/tracks/feature/src/lib/tracks.module.ts
@@ -3,7 +3,7 @@ import { CommonModule } from '@angular/common';
 import { RouterModule } from '@angular/router';
 import { TracksComponent } from './tracks.component';
 import { WorkInProgressModule } from '@angular-spotify/web/shared/ui/work-in-progress';
-import { TracksLoadingModule } from '@angular-spotify/web/shared/ui/tracks-loading';
+import { TracksLoadingComponent } from '@angular-spotify/web/shared/ui/tracks-loading';
 import { MediaSummaryModule } from '@angular-spotify/web/shared/ui/media-summary';
 import { MediaTableModule } from '@angular-spotify/web/shared/ui/media-table';
 import { SvgIconsModule } from '@ngneat/svg-icon';
@@ -18,7 +18,7 @@ import { PlaylistTrackModule } from '@angular-spotify/web/playlist/ui/playlist-t
         component: TracksComponent
       }
     ]),
-    TracksLoadingModule,
+    TracksLoadingComponent,
     MediaSummaryModule,
     MediaTableModule,
     SvgIconsModule,
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		export * from './lib/tracks-loading.module';
		export * from './lib/tracks-loading.component';