#Skeleton

Hold the place of content that's still loading with a muted, pulsing block shaped like it.

#Installation

npx @blotch/dolan add skeleton

import { UiSkeleton } from '../components/ui/skeleton';

#Usage

import { Component } from '@angular/core';
import { UiSkeleton } from '../components/ui/skeleton';

@Component({
  selector: 'app-loading-line',
  imports: [UiSkeleton],
  template: `<ui-skeleton class="h-4 w-full" />`,
})
export class LoadingLine {}

• The skeleton has no size of its own. Give it a width and height with classes.
• It's rounded-md by default. Add rounded-full for a circle.

#Card layout

Compose several skeletons to match the shape of the content you're loading. Swap them for the real content with @if once it arrives.

<view class="flex flex-col gap-4">
  <view class="flex flex-row items-center gap-3">
    <ui-skeleton class="h-10 w-10 rounded-full" />
    <view class="flex flex-1 flex-col gap-2">
      <ui-skeleton class="h-4 w-3/4" />
      <ui-skeleton class="h-3 w-1/2" />
    </view>
  </view>
  <ui-skeleton class="h-48 w-full" />
</view>

This template uses <view>, so its component imports LYNX_ELEMENTS from @blotch/angular-lynx.

#API

#UiSkeleton

No outputs.

#Related

• Avatar: uses a skeleton while its photo loads
• Spinner: show loading without a placeholder shape
• Progress: show how far a task has got