Tab component has a flicker on page refresh

[alexmanase]

Flux version

v1.0.32

Livewire version

v3.5.17

What is the problem?

The Tab component is flickering when the selected value is not the first one.

Here I selected the second value for tab and it's flickering on refresh.

Screen.Recording.2024-12-16.at.16.02.48.mov

Code snippets

use Livewire\Volt\Component;

new class extends Component
{
    public $tab = 'account';
};

<flux:tab.group>
    <flux:tabs wire:model="tab">
        <flux:tab name="profile">Profile</flux:tab>
        <flux:tab name="account">Account</flux:tab>
        <flux:tab name="billing">Billing</flux:tab>
    </flux:tabs>

    <flux:tab.panel name="profile">
        Profile content
    </flux:tab.panel>
    <flux:tab.panel name="account">
        Account content
    </flux:tab.panel>
    <flux:tab.panel name="billing">
        Billings content
    </flux:tab.panel>
</flux:tab.group>

How do you expect it to work?

There should be no flickering on refresh.

Please confirm (incomplete submissions will not be addressed)

• I have provided easy and step-by-step instructions to reproduce the bug.
• I have provided code samples as text and NOT images.
• I understand my bug report will be closed if I haven't met the criteria above.

[jeffchown]

@alexmanase You can add x-cloak to the flux:tab.group to hide the Alpine update to set the tab to the value of your $tab property. e.g. <flux:tab.group x-cloak>

[alexmanase]

Thank you! It works this way, but I think it would be ideal to be by default with x-cloak.

[jeffchown]

You're welcome!

[calebporzio]

Yeah x-cloak is a good stop-gap, but I'm wondering what part of the system is lagging by that single tick that causes the flash of wrong content. @joshhanley mind doing a quick dive on this to see what the order of things is and if it's reasonable to eliminate this lag?

[joshhanley]

I've investigated this and there is a timing issue between Flux booting and then Livewire booting. It's not something we're going to change at the moment, so we're going to close this issue.

We'd suggest you add x-cloak to the whole <flux:tab.group> as @jeffchown suggested or to each of your <flux:tab.panel> components if that is preferable.

We don't want to add x-cloak inside the components as different people will have different opinions on what is acceptable, ie hide the tabs completely and have layout shift vs have the tabs flicker.