Tabs: do not render inactive panels

[tanguilp]

Hi there,

Was working with tabs and got the following problem: I have 3 tabs with 3 different URIs (let's call them A, B, C) and 3 different actions. I'm using push_patch to switch between them and still have nice URIs and not duplicate heex code.

The problem is that, depending on the current tab (A, B or C), I load, or I don't load, some data.

For instance, when I'm on tab B, I don't load data for tab A:

<:panel>
  <p>{render(@data_for_tab_a)}</p>
</:panel>
<:panel>
  <p>{render(@data_for_tab_b)}</p>
</:panel>

However, when I'm on tab B, because the first panel is rendered it requires @data_for_tab_a which is inefficient (and in my case causes crash because I do not load it).

I think we should disable rendering for tabs that are not active, even though I doubt it's possible with the current architecture (using javascript if I recall correctly).

Cheers, and I hope the best for you guys for the coming weeks ❤️

[shahryarjb]

Hi dear @tanguilp , you behave server side component on a client side component! so you get so many problems!
for example this tab is client side it handle with pure CSS ! it needs to load all data and let you change the tab! not load in each tab selection!

you can bypass with live view way I think! something JS push

slot :panel, required: false do
    attr :class, :any, doc: "Custom CSS class for additional styling"
  end

but the panel dose not have something on action!!

It needs you to create or improve this tabs for server side too!!
for now I think it is not my road map! but I will see it

[tanguilp]

Yeah what I could do is:

<:panel>
  <p :if={@live_action == :a}>{render(@data_for_tab_a)}</p>
</:panel>
<:panel>
  <p :if={@live_action == :b}>{render(@data_for_tab_b)}</p>
</:panel>

but still I'm wondering if it could be directly by the component.

[shahryarjb]

Hi dear @tanguilp sorry Not for now unfortunately 😕. It needs to have some updates. Because it was created to be full client side. PR welcome 🙏