From 865d62f91d3769227c1c883b5c87d33e9ef52c96 Mon Sep 17 00:00:00 2001
From: 4gray <4gray@users.noreply.github.com>
Date: Wed, 8 Feb 2023 22:50:57 +0100
Subject: [PATCH] style: add skeleton animation for playlists

---
 .../recent-playlists.component.html           | 83 ++++++++++++-------
 .../recent-playlists.component.scss           | 18 ++++
 .../recent-playlists.component.ts             |  3 +
 src/app/shared/shared.module.ts               |  6 ++
 4 files changed, 82 insertions(+), 28 deletions(-)

diff --git a/src/app/home/recent-playlists/recent-playlists.component.html b/src/app/home/recent-playlists/recent-playlists.component.html
index b927b71ae..d7128bd2c 100644
--- a/src/app/home/recent-playlists/recent-playlists.component.html
+++ b/src/app/home/recent-playlists/recent-playlists.component.html
@@ -1,31 +1,58 @@
-<mat-nav-list cdkDropList (cdkDropListDropped)="drop($event)">
-    <mat-list-item *ngIf="playlists.length === 0">
-        <mat-icon class="favorites-icon" mat-list-icon>search</mat-icon>
-        <div mat-line>{{ 'HOME.PLAYLISTS.NO_PLAYLISTS' | translate }}</div>
-        <div mat-line class="meta">
-            {{ 'HOME.PLAYLISTS.ADD_FIRST' | translate }}
+<div id="skeleton-container" *ngIf="loading; else playlistsView">
+    <div class="skeleton-item" *ngFor="let a of [].constructor(10)">
+        <ngx-skeleton-loader
+            count="1"
+            appearance="circle"
+        ></ngx-skeleton-loader>
+        <div class="text">
+            <ngx-skeleton-loader
+                count="1"
+                [theme]="{ width: '30%', height: '20px' }"
+            ></ngx-skeleton-loader>
+            <ngx-skeleton-loader
+                count="1"
+                [theme]="{ width: '50%', height: '10px' }"
+            ></ngx-skeleton-loader>
         </div>
-    </mat-list-item>
-    <mat-list-item
-        *ngIf="playlists.length > 0"
-        (click)="getPlaylist('GLOBAL_FAVORITES')"
-    >
-        <mat-icon class="favorites-icon" mat-list-icon>star</mat-icon>
-        <div mat-line>
-            {{ 'HOME.PLAYLISTS.GLOBAL_FAVORITES' | translate }}
+        <div class="actions">
+            <ngx-skeleton-loader
+                count="2"
+                appearance="circle"
+            ></ngx-skeleton-loader>
         </div>
-        <div mat-line class="meta">
-            {{ 'HOME.PLAYLISTS.GLOBAL_FAVORITES_DESCRIPTION' | translate }}
-        </div>
-        <mat-divider></mat-divider>
-    </mat-list-item>
+    </div>
+</div>
 
-    <app-playlist-item
-        *ngFor="let item of playlists; last as last"
-        [item]="item"
-        (editPlaylistClicked)="openInfoDialog($event)"
-        (playlistClicked)="getPlaylist($event)"
-        (refreshClicked)="refreshPlaylist($event)"
-        (removeClicked)="removeClicked($event)"
-    ></app-playlist-item>
-</mat-nav-list>
+<ng-template #playlistsView>
+    <mat-nav-list cdkDropList (cdkDropListDropped)="drop($event)">
+        <mat-list-item *ngIf="playlists.length === 0">
+            <mat-icon class="favorites-icon" mat-list-icon>search</mat-icon>
+            <div mat-line>{{ 'HOME.PLAYLISTS.NO_PLAYLISTS' | translate }}</div>
+            <div mat-line class="meta">
+                {{ 'HOME.PLAYLISTS.ADD_FIRST' | translate }}
+            </div>
+        </mat-list-item>
+        <mat-list-item
+            *ngIf="playlists.length > 0"
+            (click)="getPlaylist('GLOBAL_FAVORITES')"
+        >
+            <mat-icon class="favorites-icon" mat-list-icon>star</mat-icon>
+            <div mat-line>
+                {{ 'HOME.PLAYLISTS.GLOBAL_FAVORITES' | translate }}
+            </div>
+            <div mat-line class="meta">
+                {{ 'HOME.PLAYLISTS.GLOBAL_FAVORITES_DESCRIPTION' | translate }}
+            </div>
+            <mat-divider></mat-divider>
+        </mat-list-item>
+
+        <app-playlist-item
+            *ngFor="let item of playlists; last as last"
+            [item]="item"
+            (editPlaylistClicked)="openInfoDialog($event)"
+            (playlistClicked)="getPlaylist($event)"
+            (refreshClicked)="refreshPlaylist($event)"
+            (removeClicked)="removeClicked($event)"
+        ></app-playlist-item>
+    </mat-nav-list>
+</ng-template>
diff --git a/src/app/home/recent-playlists/recent-playlists.component.scss b/src/app/home/recent-playlists/recent-playlists.component.scss
index 15fba7be3..92a7ac2c8 100644
--- a/src/app/home/recent-playlists/recent-playlists.component.scss
+++ b/src/app/home/recent-playlists/recent-playlists.component.scss
@@ -32,3 +32,21 @@
 .favorites-icon {
     margin-left: 16px;
 }
+
+#skeleton-container {
+    padding-top: 10px;
+
+    .skeleton-item {
+        display: flex;
+        padding-left: 25px;
+        height: 72px;
+
+        .text {
+            flex: 1;
+            align-self: center;
+            padding-left: 6px;
+            flex-direction: column;
+            display: flex;
+        }
+    }
+}
diff --git a/src/app/home/recent-playlists/recent-playlists.component.ts b/src/app/home/recent-playlists/recent-playlists.component.ts
index edc14b96d..19495e9ab 100644
--- a/src/app/home/recent-playlists/recent-playlists.component.ts
+++ b/src/app/home/recent-playlists/recent-playlists.component.ts
@@ -28,12 +28,15 @@ export class RecentPlaylistsComponent implements OnDestroy {
     /** All available playlists */
     playlists: PlaylistMeta[] = [];
 
+    loading = true;
+
     /** IPC Renderer commands list with callbacks */
     commandsList = [
         new IpcCommand(
             PLAYLIST_GET_ALL_RESPONSE,
             (response: { payload: Partial<PlaylistMeta[]> }) => {
                 this.playlists = response.payload;
+                this.loading = false;
             }
         ),
         new IpcCommand(PLAYLIST_REMOVE_BY_ID_RESPONSE, (): void => {
diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts
index 239891a27..fba8db075 100644
--- a/src/app/shared/shared.module.ts
+++ b/src/app/shared/shared.module.ts
@@ -3,6 +3,7 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { TranslateModule } from '@ngx-translate/core';
+import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 import { NgxWhatsNewModule } from 'ngx-whats-new';
 import { PlaylistItemComponent } from '../home/recent-playlists/playlist-item/playlist-item.component';
 import { RecentPlaylistsComponent } from '../home/recent-playlists/recent-playlists.component';
@@ -10,6 +11,7 @@ import { MaterialModule } from '../material.module';
 import { HeaderComponent } from './components/';
 import { FilterPipe } from './pipes/filter.pipe';
 import { MomentDatePipe } from './pipes/moment-date.pipe';
+
 @NgModule({
     declarations: [
         FilterPipe,
@@ -26,6 +28,10 @@ import { MomentDatePipe } from './pipes/moment-date.pipe';
         ReactiveFormsModule,
         TranslateModule,
         DragDropModule,
+        NgxSkeletonLoaderModule.forRoot({
+            animation: 'pulse',
+            loadingText: 'This item is actually loading...',
+        }),
     ],
     exports: [
         FilterPipe,