# `Ascii.Pieces.Skeleton`
[🔗](https://github.com/houllette/ascii_art/blob/main/lib/ascii/pieces/skeleton.ex#L1)

A loading card in shade blocks with a shimmer passing over.

The loading placeholder for a card. An avatar, a name and a byline, an
image and lines of text in light shade, with a shimmer sweeping across
them while the content is on its way. Its options shape the card to the
one it stands in for.

## Options

Give them to `Ascii.new/2` as `options:`, and new ones while it plays
with `Ascii.put_options/2` (or a Phoenix player's `options`): the card
is laid out anew from them, and the shimmer carries on, being a function
of play time.

  * `avatar` - a round avatar, with a name and a byline beside it; `false`
    leaves a title and a shorter line in its place. Default `true`.
  * `image` - an image block under the head. Default `true`.
  * `lines` - lines of text under them, the last cut short like the end
    of a paragraph; taken as its integer part, as upstream floors it, and
    as many as fit: three under an avatar and an image, six without the
    image, four without the avatar, eight with neither. Default 3.

The frame is always 52 by 23, the card as tall as its blocks and centred
in it.

## Colours

It has no parts to colour one by one: in one ink, or a gradient, with
`:ink` and `:gradient` (see `Ascii.Ink`). On a light page (`paper:
true`) the shimmer lifts the shade toward the page rather than darkening
it.

## Keys and clicks

It takes none: it stands in for content, and `Ascii.handle_event/2`
ignores every event. A Phoenix player given `interactive` and `notify`
still tells your LiveView where it was clicked.

## Screen readers

`Ascii.describe/1` gives the piece's name and note, "skeleton: a
loading card in shade blocks with a shimmer passing over"; give a player
a `label` of your own, as "loading the profile", to say what is coming.

## Example

```elixir
card = Ascii.new!("skeleton", options: %{avatar: false, lines: 2}, ink: "#8b949e")
{frame, _card} = Ascii.frame(card, 0.5)
{frame.cols, frame.rows}
#=> {52, 23}

Enum.count(frame.lines, &(&1 =~ ~r/[░▒▓]/u))
#=> 10
```

```heex
<Ascii.Phoenix.live_player id="loading" piece="skeleton" options={%{image: false}} label="loading the profile" />
```

Ported from `src/pieces/skeleton.ts` in bas3line/ascii (MIT).

---

*Consult [api-reference.md](api-reference.md) for complete listing*