Tabbed interface with multiple LiveViews?

Questions & Help Questions
,
5

Seems like I can do

<%= live_render @socket, RemitWeb.OneLive, id: :one %>

instead of

<%= live_component @socket, MyWeb.OneComponent, id: :one %>

Then when I navigate between the tabs, it does mount the components again, but it no longer does an Ajax request to “/one” like it did when I used live_redirect … for the links in the layout.

I can go even further and have TabsLive do

def render(assigns) do
  ~L"""
  <div style="display: <%= if @live_action == :one, do: "block", else: "none" %>">
    <%= live_render @socket, MyWeb.OneLive, id: :one %>
  </div>

  <div style="display: <%= if @live_action == :two, do: "block", else: "none" %>">
    <%= live_render @socket, RemitWeb.TwoLive, id: :two %>
  </div>
  """
end

Then it only mounts them once and hides/shows them, but all within LiveView.

When both LiveViews run at the same time, they can’t be relied on to set page_title anymore (the one that isn’t visible could suddenly set it based on some background event), but that responsibility fits well in a TabsLive anyway:

def handle_params(_params, _uri, socket) do
  socket =
    case socket.assigns.live_action do
      :one ->
        assign(socket, :page_title, "One")
      :two ->
        assign(socket, :page_title, "Two")
    end

  {:noreply, socket}
end

Would love some feedback on how sane this solution is :smiley: