Filament3, toggle component, form jump after state updated.

The issue you're experiencing with the form "jumping" when the toggle state changes is likely due to the re-rendering of the form components. This can happen when the state is updated and the form is re-evaluated, causing a slight visual shift.

Here are a few steps you can take to mitigate this issue:

1. Minimize Re-renders: Ensure that only the necessary components are re-rendered when the state changes. This can be done by isolating the state changes to specific components.

2. CSS Adjustments: Sometimes, adding CSS transitions or ensuring consistent heights and widths can help smooth out the visual changes.

3. Debounce State Updates: Debouncing the state updates can help reduce the frequency of re-renders.

Here is a revised version of your code with some adjustments:

Toggle::make('internal')
    ->label('Sisäinen domaini')
    ->live()
    ->default(true)
    ->onColor('success')
    ->offColor('danger')
    ->afterStateUpdated(function (Forms\Components\Toggle $component, $set, $state) {
        $set('label', $state ? 'text when set ON' : 'text when set OFF');
    }),

Group::make()
    ->schema([
        TextInput::make('label')
            ->label(fn ($get) => $get('label'))
            ->reactive()
            ->disabled()
            ->default('Some default text')
    ])
    ->extraAttributes(['style' => 'height: 30px;']),

Additionally, you can add some CSS to ensure smoother transitions:

/* Add this to your app.css */
.toggle-container {
    transition: all 0.3s ease-in-out;
}

And then apply this class to your form components:

Toggle::make('internal')
    ->label('Sisäinen domaini')
    ->live()
    ->default(true)
    ->onColor('success')
    ->offColor('danger')
    ->afterStateUpdated(function (Forms\Components\Toggle $component, $set, $state) {
        $set('label', $state ? 'text when set ON' : 'text when set OFF');
    })
    ->extraAttributes(['class' => 'toggle-container']),

Group::make()
    ->schema([
        TextInput::make('label')
            ->label(fn ($get) => $get('label'))
            ->reactive()
            ->disabled()
            ->default('Some default text')
    ])
    ->extraAttributes(['class' => 'toggle-container', 'style' => 'height: 30px;']),

By adding the toggle-container class and the CSS transition, you should see a smoother update without the form "jumping" as much. If the issue persists, you might need to look into more specific CSS adjustments or further isolate the state changes to minimize re-renders.