style: enhance grid list component with loading skeletons and type safety

- Updated GridListComponent to use a skeleton loading UI during data fetching.
- Introduced GridListItem interface for better type safety on items input.
- Improved paginator integration with proper type definitions.
- Refactored loading state handling to utilize computed properties.

feat: Improve portal rail links with accessibility features

- Added aria-current attribute to indicate active links.
- Enhanced styling for active links with new CSS variables for selection colors.

style: Refactor styles for portal rail links and context panels

- Updated SCSS for portal rail links to improve hover and active states.
- Introduced new styles for context skeletons in workspace context panel.

feat: Implement skeleton loaders in stalker main container and workspace context panel

- Replaced ngx-skeleton-loader with custom skeleton components for better control.
- Added skeleton loading states for categories in stalker main container.

style: Refine recently added component styles and interactions

- Enhanced section styling with active state indicators and transitions.
- Improved layout and visual feedback for recently added items.

fix: Correctly handle section activation in recently added component

- Added logic to determine active sections based on selected content type.

refactor: Update XtreamShellComponent to improve import overlay handling

- Changed isImporting check to showImportOverlay for better clarity.
- Refactored section handling to use signals for state management.

style: Introduce new selection colors and effects across the application

- Added new CSS variables for selection colors and effects to enhance UI consistency.
- Updated various components to utilize new selection styles for better user experience.

apps/web/src/app/workspace/workspace-context-panel.component.ts

@@ -4,7 +4,6 @@ import { MatIconButton } from '@angular/material/button';
 import { MatIcon } from '@angular/material/icon';
 import { MatTooltip } from '@angular/material/tooltip';
 import { Router } from '@angular/router';
-import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 import { PlaylistErrorViewComponent } from '../xtream-electron/playlist-error-view/playlist-error-view.component';
 import {
     CategoryManagementDialogComponent,
@@ -33,7 +32,6 @@ interface XtreamCategoryLike {
         MatIcon,
         MatIconButton,
         MatTooltip,
-        NgxSkeletonLoaderModule,
         PlaylistErrorViewComponent,
     ],
     templateUrl: './workspace-context-panel.component.html',
@@ -69,8 +67,14 @@ export class WorkspaceContextPanelComponent {
 
     readonly stalkerCategories = this.stalkerStore.getCategoryResource;
     readonly stalkerSelectedCategoryId = this.stalkerStore.selectedCategoryId;
-    readonly isStalkerCategoryLoading = this.stalkerStore.isCategoryResourceLoading;
-    readonly isStalkerCategoryFailed = this.stalkerStore.isCategoryResourceFailed;
+    readonly isStalkerCategoryLoading =
+        this.stalkerStore.isCategoryResourceLoading;
+    readonly isStalkerCategoryFailed =
+        this.stalkerStore.isCategoryResourceFailed;
+    readonly skeletonRows = Array.from({ length: 14 }, (_, index) => index);
+    readonly skeletonLabelWidths = [
+        78, 66, 74, 59, 83, 69, 76, 62, 81, 64, 72, 67, 79, 61,
+    ];
 
     readonly title = computed(() => {
         if (this.isXtreamCategories()) {