refactor: introduce loading flag in playlists store

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>

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(

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 {

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;

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,