Untitled

<div x-data="{
    step: 0,
    transitioning: false,
    loading: false,
    async nextStep() {
        this.transitioning = true

        setTimeout(() => {
            this.loadingIndicator = true
        }, 500)
    
        await $wire.call('nextStep')

        this.step++
    
        this.loadingIndicator = false

        setTimeout(() => {
            this.transitioning = false
        }, 500)
    }
}" class="p-10">
    @dump('$step: '.$step)
    @dump('$movie: '.$movie)
    @dump('$year: '.$year)

    <div x-show="loadingIndicator" class="text-blue-400/50" x-transition.duration.500ms x-cloak>Loading...</div>
    
    <div class="text-white" x-transition.duration.500ms x-show="step === 0 && transitioning === false">
        <div>STEP 0</div>
        <div>
            <label class="block">
                <div>Elokuva</div>
                <input type="text" wire:model="movie" class="text-black">
            </label>
        </div>
    </div>

    <div class="text-white" x-transition.duration.500ms x-show="step === 1 && transitioning === false" x-cloak>
        <div>STEP 1</div>
        <div>
            <label class="block">
                <div>Elokuva</div>
                <input type="text" wire:model="movie" class="text-black">
            </label>
    
            <label class="block">
                <div>Vuosi</div>
                <input type="text" wire:model="year" class="text-black">
            </label>
        </div>
    </div>

    <div class="mt-4">
        <button type="button" @click="nextStep" class="bg-blue-400 text-white py-2 px-4 rounded-md" :disabled="transitioning">Next</button>
    </div>
</div>