intrepidshape/elm-web3-ui/4.0.0

Web3.Ui.Skeleton

Loading placeholders shaped like the things they stand in for.

Every read-heavy dapp needs these; pairing each atom with a skeleton of the same silhouette keeps layouts from jumping when data lands. All shimmer and color comes from your CSS -- the classes are the whole API:

.web3-skeleton {
    background: linear-gradient(90deg, #222 25%, #333 50%, #222 75%);
    background-size: 200% 100%;
    animation: web3-shimmer 1.4s infinite;
    border-radius: 4px;
}
@keyframes web3-shimmer {
    to { background-position: -200% 0; }
}

Each helper renders a <span> (or <div> for block) that is aria-hidden -- the loading announcement belongs on the container (see Web3.Ui.RemoteCall.view, which sets aria-busy), not on each bone.

CSS classes: web3-skeleton, plus a shape modifier -- web3-skeleton--line, --block, --circle, --pill, --address, --amount.

line : List (Attribute msg) -> Html msg

A one-line text placeholder.

block : List (Attribute msg) -> Html msg

A rectangular area placeholder (cards, charts).

circle : List (Attribute msg) -> Html msg

A circular placeholder (identicons, token logos).

pill : List (Attribute msg) -> Html msg

A rounded chip placeholder (badges, buttons).

address : List (Attribute msg) -> Html msg

Sized like a truncated address (0x1234...abcd).

amount : List (Attribute msg) -> Html msg

Sized like a token amount.