NqSkeletonLoadingComponent

A highly flexible wrapper around generic PrimeNG skeleton utilities (p-skeleton, p-table) that helps rapidly scaffold different types of loading states for your UI.

Features

• ✅ Pre-configured Patterns: Provides 'list', 'card', 'table', and 'line' pre-configured arrangements.
• ✅ Signal-Based: Powered entirely by modern Angular inputs and natively optimized computed properties.
• ✅ Custom Sizing & Shapes: Easily manipulate dimensions, shapes, and counts without worrying about deeply nested CSS.

Usage

Basic Patterns

Show a basic list skeleton (default)

<nq-skeleton-loading type="list" [count]="5" />

Show a complex card/profile skeleton

<nq-skeleton-loading type="card" [count]="2" />

Show a complete table skeleton layout

<nq-skeleton-loading type="table" [count]="10" [columns]="6" />

Options & Inputs

| Input | Type | Default | Description | |-------|------|---------|-------------| | type | 'line' \| 'card' \| 'table' \| 'list' | 'list' | Dictates which rendering template / shape matrix is selected. | | count | number | 5 | Specifies how many repeated items are shown. (Acts as rows for table and generic repeating items for list and card). | | columns | number | 4 | specifically dictates column headers/cells length when type is table. | | width | string \| undefined | undefined | Passes a distinct width (e.g. '100%', '200px') | | height | string \| undefined | undefined | Passes a distinct height (e.g. '30px') | | size | string \| undefined | undefined | Shorthand identical width/height useful mainly for circle shapes. | | shape | 'rectangle' \| 'circle' | 'rectangle' | Geometry format of the inline skeletons. | | borderRadius | string \| undefined | undefined | Fine-grained control over border radius on blocks. | | animation | 'wave' \| 'none' | 'wave' | Controls the ambient CSS glowing motion on the skeletons. | | containerClass | string | '' | Applies classes to the outer wrapper elements enclosing the repeating nodes. | | styleClass | string | '' | Applies class strings directly onto the inner low-level p-skeleton directives. |

Note on Container vs Style Classes

• containerClass: Ideal for spacing layouts for entire lists.
• styleClass: Ideal when you are tweaking margins on singular repeated line or list skeleton elements.