From 2130fe309dc80549f06c3a9ac90f609d3d720bc6 Mon Sep 17 00:00:00 2001
From: 4gray <4gray@users.noreply.github.com>
Date: Fri, 24 Feb 2023 13:38:29 +0100
Subject: [PATCH] refactor: introduce loading flag in playlists store

---
 .../recent-playlists/recent-playlists.component.html   |  8 ++++++--
 .../recent-playlists/recent-playlists.component.ts     |  7 ++++++-
 src/app/state/playlists.state.ts                       |  2 ++
 src/app/state/reducers.ts                              | 10 ++++++----
 src/app/state/selectors.ts                             |  5 +++++
 5 files changed, 25 insertions(+), 7 deletions(-)

diff --git a/src/app/home/recent-playlists/recent-playlists.component.html b/src/app/home/recent-playlists/recent-playlists.component.html
index 830d64748..cee4aa9d3 100644
--- a/src/app/home/recent-playlists/recent-playlists.component.html
+++ b/src/app/home/recent-playlists/recent-playlists.component.html
@@ -1,5 +1,9 @@
-<ng-container *ngIf="playlists$ | async as playlists; else skeletonView">
-    <mat-nav-list cdkDropList (cdkDropListDropped)="drop($event, playlists)">
+<ng-container *ngIf="allPlaylistsLoaded$ | async; else skeletonView">
+    <mat-nav-list
+        cdkDropList
+        (cdkDropListDropped)="drop($event, playlists)"
+        *ngIf="playlists$ | async as playlists"
+    >
         <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>
diff --git a/src/app/home/recent-playlists/recent-playlists.component.ts b/src/app/home/recent-playlists/recent-playlists.component.ts
index 02031db3b..e53d41946 100644
--- a/src/app/home/recent-playlists/recent-playlists.component.ts
+++ b/src/app/home/recent-playlists/recent-playlists.component.ts
@@ -16,7 +16,10 @@ import { IpcCommand } from '../../../../shared/ipc-command.class';
 import { Playlist } from '../../../../shared/playlist.interface';
 import { DataService } from '../../services/data.service';
 import * as PlaylistActions from '../../state/actions';
-import { selectAllPlaylistsMeta } from '../../state/selectors';
+import {
+    selectAllPlaylistsMeta,
+    selectPlaylistsLoadingFlag,
+} from '../../state/selectors';
 import {
     AUTO_UPDATE_PLAYLISTS_RESPONSE,
     DELETE_ALL_PLAYLISTS,
@@ -42,6 +45,8 @@ export class RecentPlaylistsComponent implements OnDestroy {
         map((playlists) => playlists.sort((a, b) => a.position - b.position))
     );
 
+    allPlaylistsLoaded$ = this.store.select(selectPlaylistsLoadingFlag);
+
     /** IPC Renderer commands list with callbacks */
     commandsList = [
         new IpcCommand(
diff --git a/src/app/state/playlists.state.ts b/src/app/state/playlists.state.ts
index 630b47045..bc5c80a9c 100644
--- a/src/app/state/playlists.state.ts
+++ b/src/app/state/playlists.state.ts
@@ -9,11 +9,13 @@ export const playlistsAdapter: EntityAdapter<PlaylistMeta> =
 
 export interface PlaylistMetaState extends EntityState<PlaylistMeta> {
     selectedId: string;
+    allPlaylistsLoaded: boolean;
 }
 
 export const initialPlaylistMetaState: PlaylistMetaState =
     playlistsAdapter.getInitialState({
         selectedId: '',
+        allPlaylistsLoaded: false,
     });
 
 export const {
diff --git a/src/app/state/reducers.ts b/src/app/state/reducers.ts
index a8298d604..b4c76a26f 100644
--- a/src/app/state/reducers.ts
+++ b/src/app/state/reducers.ts
@@ -82,10 +82,10 @@ export const playlistReducer = createReducer(
     on(PlaylistActions.loadPlaylistsSuccess, (state, action): PlaylistState => {
         return {
             ...state,
-            playlists: playlistsAdapter.upsertMany(
-                action.playlists,
-                state.playlists
-            ),
+            playlists: playlistsAdapter.addMany(action.playlists, {
+                ...state.playlists,
+                allPlaylistsLoaded: true,
+            }),
         };
     }),
     on(PlaylistActions.removePlaylist, (state, action): PlaylistState => {
@@ -201,3 +201,5 @@ export const selectChannels = (state: PlaylistState) => state.channels;
 export const selectPlaylists = (state: PlaylistState) => state.playlists;
 export const selectPlaylistId = (state: PlaylistState) =>
     state.playlists?.selectedId;
+export const selectPlaylistsLoadingFlag = (state: PlaylistState) =>
+    state.playlists?.allPlaylistsLoaded;
diff --git a/src/app/state/selectors.ts b/src/app/state/selectors.ts
index 5f7806766..ac7d12db4 100644
--- a/src/app/state/selectors.ts
+++ b/src/app/state/selectors.ts
@@ -26,6 +26,11 @@ export const selectChannels = createSelector(
     fromPlaylistState.selectChannels
 );
 
+export const selectPlaylistsLoadingFlag = createSelector(
+    selectPlaylistState,
+    fromPlaylistState.selectPlaylistsLoadingFlag
+);
+
 /** Playlist entity store selectors */
 export const selectPlaylistsMetaState = createSelector(
     selectPlaylistState,