Empty state

<MishkaEmptyState> draws an indicator (a glyph or emoji), a title, a description and a row of actions. Every part is optional.

align chooses the layout. :center, the default, puts the indicator above the text and fills a blank screen. :leading puts the indicator beside the text, so the empty state sits inside a card or a section without making the screen look broken.

Your screen owns the state. Show the empty state when the list is empty and the list when it has items. The component holds no state and sends no events of its own.

Three slot tags mirror the slots of the web component:

The actions prop is there for buttons you build from data. When you give both, the slot wins. The component owns the actions row and spaces the buttons for you. Each action hugs its content, because the component sets fill_width to false on it unless you set that attribute yourself.

Run this from your Mob app's root to add the component to lib/<app>/components/:

mix mishka.ui.gen.mob empty_state

The generator registers the tag, so you can use it in ~MOB markup. The examples on this page use the mishka_ prefix of the showcase app (--module-prefix mishka_), so the tag is <MishkaEmptyState>. Without a prefix, the tag is <EmptyState>.

The default :center layout puts the indicator above the title and the description. Use it when the empty state is the whole screen.

Centered empty state

LTR RTL

Preview

Show the whole example Show less

<MishkaEmptyState
  indicator="📭"
  title="No messages"
  description="Anything you receive lands here."
/>

align={:leading} puts the indicator beside the text. This layout sits inside a card without looking like the screen has failed.

Leading empty state

LTR RTL

Preview

Show the whole example Show less

<MishkaEmptyState align={:leading} indicator="🔍" title="No results" />

Put buttons inside <MishkaEmptyStateActions> and the component lays them out in a row beneath the text, with gaps between them. In this example, tapping New adds a project and Import adds two. Either fills the list, which replaces the empty state.

The buttons are yours, so their handlers are ordinary handle_info/2 clauses. An empty state carries no events of its own.

Empty state with actions

LTR RTL

Preview

Show the whole example Show less

Left: the example as it loads. Right: after a tap. Filling the list is what makes the empty state go away.

# Actions are a SLOT tag, like Chelekom's <:actions>. The component owns
# the row, so it puts the gaps in for you.
<MishkaEmptyState indicator="📁" title="No projects yet"
                  description="Create one to get started.">
  <MishkaEmptyStateActions>
    <Button text="New" on_tap={{self(), :es_new}} />
    <Button text="Import" on_tap={{self(), :es_import}} />
  </MishkaEmptyStateActions>
</MishkaEmptyState>

# The buttons are yours, so the handlers are the ordinary ones. An empty
# state carries no events of its own.
def handle_info({:tap, :es_new}, socket) do
  {:noreply, Mob.Socket.assign(socket, :projects, ["Untitled" | socket.assigns.projects])}
end

def handle_info(_msg, socket), do: {:noreply, socket}

Every part is optional. With only a title, the component draws that one line.

Text-only empty state

LTR RTL

Preview

Show the whole example Show less

<MishkaEmptyState title="Nothing here" />

• The id and *_class attributes are not ported.

• Headless Empty State, the web component this one ports.
• Mob Skeleton, a placeholder for content that is still loading.
• Mob Loading Overlay, a scrim that covers a busy region and absorbs taps.
• Mob components, the full list of native components.