An animated spinner component.

Tela.Component.Spinner is a display-only widget that cycles through a list of animation frames at a fixed interval. It is driven by a tick cmd that the parent starts via tick_cmd/1 and routes back via handle_tick/2.

Usage

defmodule MyApp do
  use Tela
  alias Tela.Component.Spinner

  @impl Tela
  def init(_args) do
    spinner = Spinner.init(spinner: :dot)
    {%{spinner: spinner}, Spinner.tick_cmd(spinner)}
  end

  @impl Tela
  def handle_event(model, %Tela.Key{key: {:char, "q"}}), do: {model, :quit}
  def handle_event(model, _key), do: {model, nil}

  @impl Tela
  def handle_info(model, msg) do
    {spinner, cmd} = Spinner.handle_tick(model.spinner, msg)
    {%{model | spinner: spinner}, cmd}
  end

  @impl Tela
  def view(model) do
    Spinner.view(model.spinner) <> " Loading..."
  end
end

Presets

The following preset atoms are available:

• :line — |, /, -, \
• :dot — Braille dot spinner
• :mini_dot — smaller Braille dot spinner
• :jump — Braille jump spinner
• :pulse — block pulse █▓▒░
• :points — moving dot ∙∙∙ ●∙∙ ∙●∙ ∙∙●
• :globe — rotating globe emoji
• :moon — moon phase emoji
• :monkey — monkey emoji sequence
• :meter — filling bar ▱▱▱ → ▰▰▰
• :hamburger — stacked lines ☱ ☲ ☴
• :ellipsis — growing dots . .. ...

Custom spinners can be passed as a {frames, interval_ms} tuple.

Tick ownership

Components do not emit startup cmds from init/1. The parent must call tick_cmd/1 to obtain the initial cmd and include it in its own init/1 return value. The tick self-re-arms: each successful handle_tick/2 call returns a new cmd that advances the animation by one more frame.

Each spinner is assigned a unique id on init/1. Ticks carry that id, and handle_tick/2 rejects any tick whose id does not match the current spinner's id — silently dropping stale ticks from replaced spinners without needing explicit cancellation.