Default loading template for modals.

Shows a DaisyUI skeleton loader while content loads.

Renders modal chrome around content with optimistic close animations.

Uses a JavaScript hook that creates a "ghost" copy of the modal content and animates it out, providing smooth transitions even though LiveView removes the real element immediately.

Attributes

• id - Unique ID for the modal (required)
• open - Controls visibility. Modal shows when truthy.
• myself - The component's @myself for targeting events
• close_on_escape - Whether to close on escape key (default: true)
• close_on_backdrop - Whether to close on backdrop click (default: true)
• max_width - Maximum width: :sm, :md, :lg, :xl, :"2xl" (default: :md)
• duration - Animation duration in ms (default: 200)

Example

<.modal_chrome id="edit-modal" open={@product_id} myself={@myself}>
  <h2>Edit Product</h2>
  <.form ...>...</.form>
</.modal_chrome>

Attributes

• id (:string) (required) - Unique ID for the modal.
• module (:atom) (required) - The component module (for logging).
• open (:any) (required) - Controls visibility (truthy = open).
• open_field (:atom) - The name of the open state field. Defaults to :open.
• async_assign (:atom) - Async assign to wait for before showing content. Defaults to nil.
• myself (:any) (required) - The component's @myself.
• close_on_escape (:boolean) - Defaults to true.
• close_on_backdrop (:boolean) - Defaults to true.
• max_width (:atom) - Defaults to :md.
• duration (:integer) - Defaults to 200.

Slots

• inner_block (required)
• loading - Loading content shown during optimistic open.

A close button for modal headers using DaisyUI button classes.

The button dispatches a close-panel event to trigger the ghost animation, then pushes the "close" event to the server.

Example

<div class="flex justify-between">
  <h2>Title</h2>
  <.modal_close_button id={@__modal_id__} myself={@myself} />
</div>

Attributes

• id (:string) (required) - The modal ID (for targeting the close-panel event).
• myself (:any) (required)
• class (:string) - Defaults to "btn btn-sm btn-circle btn-ghost absolute right-2 top-2".

Renders modal content with async_result wrapping if a form is specified.

This component handles the async loading state automatically:

• If form_field is specified, wraps content in <.async_result>
• Shows loading template while the form data loads
• Passes the unwrapped form to the render function

Attributes

• assigns (:map) (required) - The full assigns map.
• async_assign (:atom) (required) - The async assign to wrap with async_result (or nil).
• render (:any) (required) - Function (assigns) -> HEEx.
• loading (:any) (required) - Function (assigns) -> HEEx for loading state.