GenerativeSkeleton

Package: @synapse-ui/generative-skeleton
Selector: synapse-generative-skeleton
Status: Stable

A contextual loading indicator that visually differentiates AI processing from standard network spinners.

Overview

Standard loading spinners don't communicate what kind of work is happening. GenerativeSkeleton uses a shimmer animation patterned after AI output layouts — text lines, code block placeholders, and avatar slots — so users understand the app is generating content, not just fetching data.

Installation

npm install @synapse-ui/generative-skeleton @synapse-ui/theme

Basic Example

import { Component } from '@angular/core';
import { GenerativeSkeletonComponent } from '@synapse-ui/generative-skeleton';

@Component({
  selector: 'app-loading',
  standalone: true,
  imports: [GenerativeSkeletonComponent],
  template: `
    @if (isGenerating) {
      <synapse-generative-skeleton variant="paragraph" [lines]="4" />
    }
  `,
})
export class LoadingComponent {
  isGenerating = true;
}

API Reference (Planned)

Inputs

Input	Type	Default	Description
variant	'paragraph' | 'code' | 'mixed'	'paragraph'	Layout pattern
lines	number	3	Number of text line placeholders
animated	boolean	true	Enable shimmer animation
ariaLabel	string	'Generating response...'	Accessible label

Variants

Variant	Use Case
paragraph	Text-heavy AI responses
code	Code generation responses
mixed	Responses with text and code blocks

Accessibility

• Uses role="status" and aria-busy="true".
• Respects prefers-reduced-motion — falls back to static placeholders.

Theming

Element	Token
Base shimmer	--synapse-ai-skeleton-base
Highlight	--synapse-ai-skeleton-highlight

Related Docs

• AiStreamContainer
• Design Tokens