refactor(recent-playlists): simplify template structure and remove unused imports

libs/playlist/shared/ui/src/lib/recent-playlists/recent-playlists.component.html

@@ -1,73 +1,44 @@
-@if (allPlaylistsLoaded()) {
-    @defer {
-        @if (playlistsData$ | async; as data) {
-            @if (data.playlists.length === 0) {
-                @if (data.totalCount === 0) {
-                    <!-- Welcome state: no playlists at all -->
-                    <app-empty-state
-                        [type]="'welcome'"
-                        (addPlaylistClicked)="onAddPlaylist($event)"
-                    />
-                } @else {
-                    <!-- No results state: search/filter returned nothing -->
-                    <app-empty-state [type]="'no-results'" />
-                }
-            } @else {
-                <mat-nav-list
-                    class="playlists-list"
-                    cdkDropList
-                    [cdkDropListDisabled]="!isCustomSortActive()"
-                    (cdkDropListDropped)="drop($event, data.playlists)"
-                >
-                    @for (
-                        item of data.playlists;
-                        track item._id;
-                        let last = $last
-                    ) {
-                        <app-playlist-item
-                            [item]="item"
-                            [isSelected]="activePlaylistId() === item._id"
-                            [showActions]="!sidebarMode()"
-                            [isDraggable]="isCustomSortActive()"
-                            [isRefreshing]="isRefreshPending(item._id)"
-                            [isDeleting]="isDeletePending(item._id)"
-                            [busyMessage]="getBusyMessage(item)"
-                            [busyProgress]="getBusyProgress(item._id)"
-                            [canCancelBusyAction]="
-                                canCancelBusyOperation(item)
-                            "
-                            (editPlaylistClicked)="openInfoDialog($event)"
-                            (playlistClicked)="getPlaylist(item)"
-                            (refreshClicked)="refreshPlaylist($event)"
-                            (removeClicked)="removeClicked(item)"
-                            (cancelBusyActionClicked)="
-                                cancelBusyOperation(item)
-                            "
-                        />
-                    }
-                </mat-nav-list>
-            }
+@if (playlistsData(); as data) {
+    @if (data.playlists.length === 0) {
+        @if (data.totalCount === 0) {
+            <!-- Welcome state: no playlists at all -->
+            <app-empty-state
+                [type]="'welcome'"
+                (addPlaylistClicked)="onAddPlaylist($event)"
+            />
+        } @else {
+            <!-- No results state: search/filter returned nothing -->
+            <app-empty-state [type]="'no-results'" />
         }
-    } @placeholder {
-        <div id="skeleton-container">
-            @for (a of ghostElements; track $index) {
-                <div class="skeleton-item">
-                    <ngx-skeleton-loader count="1" appearance="circle" />
-                    <div class="text">
-                        <ngx-skeleton-loader
-                            count="1"
-                            [theme]="{ width: '30%', height: '20px' }"
-                        />
-                        <ngx-skeleton-loader
-                            count="1"
-                            [theme]="{ width: '50%', height: '10px' }"
-                        />
-                    </div>
-                    <div class="actions">
-                        <ngx-skeleton-loader count="2" appearance="circle" />
-                    </div>
-                </div>
+    } @else {
+        <mat-nav-list
+            class="playlists-list"
+            cdkDropList
+            [cdkDropListDisabled]="!isCustomSortActive()"
+            (cdkDropListDropped)="drop($event, data.playlists)"
+        >
+            @for (
+                item of data.playlists;
+                track item._id;
+                let last = $last
+            ) {
+                <app-playlist-item
+                    [item]="item"
+                    [isSelected]="activePlaylistId() === item._id"
+                    [showActions]="!sidebarMode()"
+                    [isDraggable]="isCustomSortActive()"
+                    [isRefreshing]="isRefreshPending(item._id)"
+                    [isDeleting]="isDeletePending(item._id)"
+                    [busyMessage]="getBusyMessage(item)"
+                    [busyProgress]="getBusyProgress(item._id)"
+                    [canCancelBusyAction]="canCancelBusyOperation(item)"
+                    (editPlaylistClicked)="openInfoDialog($event)"
+                    (playlistClicked)="getPlaylist(item)"
+                    (refreshClicked)="refreshPlaylist($event)"
+                    (removeClicked)="removeClicked(item)"
+                    (cancelBusyActionClicked)="cancelBusyOperation(item)"
+                />
             }
-        </div>
+        </mat-nav-list>
     }
 }

libs/playlist/shared/ui/src/lib/recent-playlists/recent-playlists.component.ts

@@ -3,7 +3,6 @@ import {
     DragDropModule,
     moveItemInArray,
 } from '@angular/cdk/drag-drop';
-import { AsyncPipe } from '@angular/common';
 import { Component, effect, inject, input, output, signal } from '@angular/core';
 import { toSignal } from '@angular/core/rxjs-interop';
 import { MatDialog } from '@angular/material/dialog';
@@ -20,7 +19,6 @@ import {
     selectAllPlaylistsMeta,
     selectPlaylistsLoadingFlag,
 } from 'm3u-state';
-import { NgxSkeletonLoaderComponent } from 'ngx-skeleton-loader';
 import { BehaviorSubject, combineLatest, map } from 'rxjs';
 import { DialogService } from 'components';
 import {
@@ -51,12 +49,10 @@ type PlaylistBusyOperation = {
     templateUrl: './recent-playlists.component.html',
     styleUrls: ['./recent-playlists.component.scss'],
     imports: [
-        AsyncPipe,
         DragDropModule,
         EmptyStateComponent,
         MatInputModule,
         MatListModule,
-        NgxSkeletonLoaderComponent,
         PlaylistItemComponent,
     ],
 })
@@ -97,8 +93,6 @@ export class RecentPlaylistsComponent {
         new Map()
     );
 
-    readonly ghostElements = new Array(10);
-
     constructor() {
         // Update searchQuery when input changes
         effect(() => {
@@ -154,6 +148,13 @@ export class RecentPlaylistsComponent {
         })
     );
 
+    readonly playlistsData = toSignal(this.playlistsData$, {
+        initialValue: {
+            playlists: [] as PlaylistMeta[],
+            totalCount: 0,
+        },
+    });
+
     /**
      * Opens the details dialog with the information about the provided playlist
      * @param data selected playlist