Navigation

AI Analysis

Livewire 4: New Features & Enhancement Opportunities

This document explores new Livewire 4 features and suggests innovative ways to enhance RiftSurge's user experience.

1. Streaming & Real-Time Text

AI Analysis Streaming

Livewire 4 has better support for streaming content. Use this for AI-generated content:

// Component
class AiBriefing extends Component
{
    public string $streamedContent = '';
    
    public function generateBriefing()
    {
        // Stream AI response in real-time
        $this->stream(
            to: 'streamedContent',
            content: function () {
                foreach ($this->generateAiContent() as $chunk) {
                    yield $chunk;
                }
            }
        );
    }
}

{{-- View --}}

    

        {{ $streamedContent }}
        ▊

Use Cases:

AI Daily Briefing generation
Match analysis streaming
Podcast script preview
Strategic Intel loading

2. Optimistic UI Patterns

Immediate Feedback

class Roster extends Component
{
    public function removePlayer($playerId)
    {
        // Optimistically remove from UI immediately
        $this->players = $this->players->reject(fn($p) => $p->id === $playerId);
        
        // Then perform actual deletion
        try {
            Player::find($playerId)->delete();
        } catch (\Exception $e) {
            // Revert on failure
            $this->loadPlayers();
            $this->dispatch('notify', message: 'Failed to remove player', type: 'error');
        }
    }
}

Draft Lobby Hover States

Already implemented but can be enhanced:

// Instantly show hover state client-side, then sync to server
public function hoverChampion($championId)
{
    // Optimistic update - feels instant
    $this->blueHover = $championId;
    
    // Debounced server sync
    $this->debouncedSync();
}

3. Action Pending States

New `#[Pending]` Attribute

use Livewire\Attributes\Pending;

class PodcastWidget extends Component
{
    #[Pending]
    public bool $isGenerating = false;
    
    public function requestGeneration()
    {
        // $isGenerating is automatically true during this action
        Queue::push(new GenerateTeamPodcast($this->team));
    }
}

{{-- Blade - automatic pending detection --}}

4. Progressive Enhancement for Forms

Batch Validation

use Livewire\Attributes\Validate;
use Livewire\Attributes\Rule;

class CreateScrim extends Component
{

    
        
            
                                    
                                    
                                    
                            
        
        
                    
    




                        #[Validate('required
                    

                        date
                    

                        after:today')]
                    
















    public $date;
    

    
        
            
                                    
                                    
                            
        
        
                    
    




                        #[Validate('required
                    

                        exists:teams,id')]
                    
















    public $opponent_id;
    

    
        
            
                                    
                                    
                            
        
        
                    
    




                        #[Validate('required
                    

                        in:na1,euw1,kr1')]
                    
















    public $region;
    
    public function save()
    {
        $this->validate();
        // All validation happens in one step
    }
}

Real-Time Validation with Debounce

    wire:model.live.debounce.500ms="riot_id"
    label="Riot ID"
    placeholder="Faker#KR1"
/>
@error('riot_id')
    {{ $message }}
@enderror

5. Enhanced Poll Patterns

Smart Polling with Conditions

{{-- Only poll when tab is visible and content is stale --}}
    @if($this->shouldPoll) 
        wire:poll.10s="refresh"
    @endif
    x-data="{ visible: true }"
    x-init="
        document.addEventListener('visibilitychange', () => {
            visible = document.visibilityState === 'visible';
            if (visible) $wire.refresh();
        });
    "

Conditional Polling Based on State

class ScrimShow extends Component
{
    public function shouldPoll(): bool
    {
        // Only poll if scrim is upcoming (not completed/cancelled)
        return $this->scrim->status === 'scheduled' 
            && $this->scrim->starts_at->isFuture();
    }
}

@if($this->shouldPoll())
    
@else
    
@endif

6. Nested Component Communication

Parent-Child with Islands

{{-- Parent --}}

    @island
    
        :on-stat-click="fn($stat) => $this->showStatDetails($stat)"
    />
    @endisland
    
    {{-- Detail panel updates independently --}}
    @island
    
    @endisland

Event Bubbling

// Child component
class QuickStatCard extends Component
{
    public function handleClick()
    {
        // Bubble event to parent
        $this->dispatch('stat-selected', stat: $this->stat)->up();
    }
}

// Parent listens
#[On('stat-selected')]
public function showStatDetails($stat)
{
    $this->selectedStat = $stat;
}

7. Enhanced Wire Navigate

Prefetch Strategies

{{-- Prefetch on visibility (for infinite scroll) --}}
   wire:navigate
   x-intersect="$wire.prefetch()"

    View Game


{{-- Prefetch with priority --}}

    Dashboard
    Scrims

{{-- Global navigation loading indicator --}}
    x-data="{ navigating: false }"
    @navigate-start.window="navigating = true"
    @navigate-end.window="navigating = false"

8. Advanced Loading Patterns

Skeleton Loaders with wire:loading

{{-- Full skeleton replacement --}}

    @for($i = 0; $i < 5; $i++)
        

            

        

    @endfor



    @foreach($games as $game)
        
    @endforeach

Progressive Loading States

{{-- Show different states based on load time --}}
Loading...
Still loading, please wait...
This is taking longer than expected...

9. Wire Snapshot Improvements

Partial Hydration

For large datasets, only hydrate what's visible:

class GamesIndex extends Component
{
    #[Snapshot]
    public $visibleGames;
    
    public function loadMore()
    {
        // Only hydrate new games, not entire collection
        $this->visibleGames = $this->visibleGames->concat(
            Game::skip($this->visibleGames->count())->take(10)->get()
        );
    }
}

10. Morph Improvements

Better List Animations

{{-- Enhanced list morphing with keys --}}

    @foreach($players as $player)
        

            {{ $player->name }}
        

    @endforeach

Keyed Transitions

{{-- Smooth reordering --}}

    @foreach($championPool as $champion)
        

            wire:key="champ-{{ $champion->id }}"
            wire:transition.opacity.scale
            class="champion-card"

            
        

    @endforeach

11. New Component Features

Action Confirmations

use Livewire\Attributes\Confirm;

class RosterManagement extends Component
{
    #[Confirm('Are you sure you want to remove this player?')]
    public function removePlayer($playerId)
    {
        // Only executes if user confirms
        TeamRoster::find($playerId)->delete();
    }
}

Locked Properties

use Livewire\Attributes\Locked;

class GameShow extends Component
{
    #[Locked]
    public $gameId; // Cannot be modified from client-side
    
    public function mount($game)
    {
        $this->gameId = $game->id;
    }
}

12. Performance Optimizations

Component Caching

use Livewire\Attributes\Cache;

class ChampionPool extends Component
{
    #[Cache(seconds: 3600)]
    public function getChampionsProperty()
    {
        return Champion::all();
    }
}

Computed Property Improvements

use Livewire\Attributes\Computed;

class Dashboard extends Component
{
    #[Computed(cache: true, key: 'team-stats-{teamId}')]
    public function teamStats()
    {
        return $this->team->calculateStats();
    }
}

13. Application-Specific Enhancements

Draft Lobby Improvements

// Optimistic hover with instant feedback
class DraftLobby extends Component
{
    public function hoverChampion($championId)
    {
        // Immediately update local state (optimistic)
        $this->{$this->myTeam . 'Hover'} = $championId;
        
        // Debounced broadcast to other clients
        $this->dispatch('champion-hovered', [
            'team' => $this->myTeam,
            'champion' => $championId
        ])->debounce(100);
    }
}

AI Content Streaming

class AiBriefing extends Component
{
    public function generateInsights()
    {
        return $this->stream(function () {
            foreach ($this->aiService->streamAnalysis($this->team) as $chunk) {
                yield $chunk;
                usleep(50000); // 50ms delay for typing effect
            }
        });
    }
}

Scrim Real-Time Status

{{-- Smart polling that stops when scrim completes --}}
    @if($scrim->isPending())
        wire:poll.30s="refreshStatus"
    @elseif($scrim->isInProgress())
        wire:poll.5s="refreshStatus"
    @endif

Summary: Priority Implementation

High Impact, Low Effort

1. ✅ Loading state delays (prevent flash)

2. ✅ Wire transitions for modals/notifications

3. ✅ Lazy loading for heavy components

4. ✅ Wire navigate prefetching

High Impact, Medium Effort

1. 🔄 Islands for Dashboard & Surge Hub

2. 🔄 Form Objects for complex forms

3. 🔄 Optimistic UI for CRUD operations

High Impact, High Effort

1. ⏳ AI content streaming

2. ⏳ Advanced caching strategies

3. ⏳ Full morph optimization

Use this document to guide feature adoption after the base upgrade is complete.

Back to Docs | Edit on GitHub

MENU