Conditionally rendered Lazy Tab doesn't load if it's the first one

[dan-fein]

Current behavior

This one is interesting, I'm conditionally rendering tabs and if you don't have a default non-Lazy tab, then it doesn't load the default (left most/0th index) Tab.

Basically, I don't know which Tab will end up being the first Tab so I can't easily choose for it to have Lazy or not. So I have them all (except the first one which would never need to be Lazy) as Lazy now.

Expected behaviour

If the first tab is a Lazy tab, it should load as soon as it's active.

Code sample

<Tabs.Container
                  HeaderComponent={Header}
                  headerHeight={headerHeight} // optional
                  minHeaderHeight={200}
                >
                 // First tab, this used to not have the conditional statement
                  {posts.length > 0 && <Tabs.Tab name="Posts">
                    <Posts posts={posts} render={'posts'} currentThing={thing} {...props} key="posts" tabView={true} />
                  </Tabs.Tab>}

                  {details.length > 0 && <Tabs.Tab name="About">
                    <Tabs.Lazy>
                      <Posts posts={details} render={'details'} currentThing={thing} {...props} key="details" tabView={true} />
                    </Tabs.Lazy>
                  </Tabs.Tab>}

                  {items.length > 0 && <Tabs.Tab name="Items">
                    <Tabs.Lazy>
                      <Posts posts={items} render={'items'} currentThing={thing} {...props} key="items" tabView={true} />
                    </Tabs.Lazy>
                  </Tabs.Tab>}

                  {children.length > 0 && <Tabs.Tab name="Children">
                    <Tabs.Lazy>
                      <Posts posts={children} render={'children'} currentThing={thing} {...props} key="children" tabView={true} />
                    </Tabs.Lazy>
                  </Tabs.Tab>}

                </Tabs.Container>

What have you tried

Originally I started with the first tab not being conditionally rendered, which would render the unknown 2nd to be perfectly fine as Lazy. But now, the first tab (posts) may or may not load so the 2nd could be any of details, items, etc., which are all Lazy. So if they are first, they do not load until you either click the tab Title or switch to Tab #2+ and then back to Tab #1.

[PedroBern]

@danielfein you can use the startMounted prop on the lazy.

[dan-fein]

King, that did it! Thank you!