Hi! I’ve got a tabbed interface currently with two separate LiveViews, each with their own live route (e.g. live "/one", OneLive and live "/two", TwoLive in the router). The live layout uses live_redirect for the tabs that switch between the two. I don’t love the slight delay when clicking a lin…

[image] henrik: Or perhaps nested LiveView components, where the outer one is responsible for the tabs and does push state stuff to the URL via LiveView hooks? I am doing it LiveComponents in my app. The parent LiveView does a simple mapping from the current action to the component name, simi…

Thank you, José! Sounds like a good way of doing it - will give that a shot and see how it compares.

Started experimenting with this. I’m realising that turning my LiveViews into components makes them a little more work, because I’ll have to pass their state in from the parent TabsLive, have to explicitly tell them to pass events to @myself, and they don’t have a handle_info. But I guess that’s t…

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 liv…

[image] henrik: I’m realising that turning my LiveViews into components makes them a little more work, because I’ll have to pass their state in from the parent TabsLive, have to explicitly tell them to pass events to @myself, and they don’t have a handle_info. They can build their own state -…

[image] josevalim: Regarding your new approach, it definitely works fine, but it does mean more processes are spawned. Could you please show how to implement this use case in a better/efficient way?

[image] dalerka: Could you please show how to implement this use case in a better/efficient way? Maybe you want to see how Surface implements tabs under the hood and replicate it, or just use Surface, that is an abstraction for web components on top of live view, made by @msaraiva .

Nice! Thank you for great example!

Tabbed interface with multiple LiveViews?

Questions & Help Questions

dalerka June 13, 2020, 2:19pm 7

Could you please show how to implement this use case in a better/efficient way?