Here’s what’s happening and how to fix it:

The Issue

• Commands are async - put_command/3 adds instruction to Component struct for Hologram runtime to execute after action finishes
• Page navigations are also async - put_page/2 adds instruction to Component struct for Hologram runtime to execute after action finishes
• When you do both from the same action, the runtime executes them in parallel - the command is sent to the server while the page is fetched from the server, causing nondeterministic behavior where either operation may finish first

Solution: Command Returns Action

Have your command return an action that navigates:

def action(:set_level, params, component) do
  # Only put the command instruction
  put_command(component, :set_level, params)
end

def command(:set_level, params, server) do
  new_level = params.event.value
  Logger.configure(level: String.to_atom(new_level))
  
  # Command returns action instruction
  put_action(server, :reload_page)
end

def action(:reload_page, _params, component) do
  put_page(component, MyAppWeb.Hologram.Pages.Logging)
end

This guarantees: Action → Command (Logger.configure) → Action (navigation)

Future Feature

put_page/2 and put_page/3 directly in commands is planned. This would allow adding the page navigation instruction directly from the command to the Server struct. This is already in the backlog and I’ll increase the priority.

This would solve these synchronization issues by allowing something like this - with no additional client-server roundtrip, the page would be rendered within the same server request just after the command:

def action(:set_level, params, component) do
  put_command(component, :set_level, params)
end

def command(:set_level, params, server) do
  new_level = params.event.value
  Logger.configure(level: String.to_atom(new_level))
  
  # Future feature - put_page directly in command (not yet implemented)
  put_page(server, MyAppWeb.Hologram.Pages.Logging)
end

or even shorter by triggering the command directly through the template without the action boilerplate:

~HOLO"""
<button $click={command: :set_level, params: %{level: :warning}}>Set level</button>
"""