Header flashes when new Tabs are created

[dan-fein]

Current behavior

I'm conditionally rendering new Tabs and when some are created after API calls return they're causing the entire component to flash.

Expected behaviour

New Tabs should be created without a re-render of the entire component, the component should in-place just re-render only the parts that are necessary rather than the entire component (e.g. the Header shouldn't be re-rendered if the only things changing are below it where the tab bar is).

Code sample

For Syntax Highlighting check this link

The relevant code is just:

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

What have you tried

Narrowed down the issue to the new tabs being created conditionally.

[andreialecu]

The opacity fade in is by design, because otherwise the scroll position would zap around in certain cases, so the fading is added to obscure that.

The header shouldn't flash though. Is this still a problem in recent rcs?

[dan-fein]

You legend! Fixed in 4.0.0 thank you and congrats on the release!

[dan-fein]

So this issue is back. I can confirm that it's occurring due to this component as I've popped the same Header out of the component and flashing stops. It appears to be occurring when there's a change to the tabs. I've been seeing it mostly with the dynamic tabs, when a new one is added just after load when a network call is returned. Somehow when the tab data appears (so not just the tab, but the component within) is returned, the header again flashes. Any thoughts on why this may be?