How to use laravel components with livewire lazy placeholder

Question

I want to add the skeleton of my laravel component inside a livewire 3 placeholder What I've tried so far:

Implement the Livewire class by including the Laravel component:

public function placeholder()
{
    return <<<'HTML'
        <x-skeleton />
    HTML;
}

The above method does not render anything,

But when I try to use direct HTML like this:

public function placeholder()

    {
        return <<<'HTML'
            <div class="card" aria-hidden="true">
                <div class="card-body">
                    <p class="card-text placeholder-glow">
                        <span class="placeholder col-12"></span>
                    </p>
                    <p class="card-text placeholder-glow">
                        <span class="placeholder col-12"></span>
                    </p>
                </div>
            </div>
        HTML;
    }

good results, I prefer using laravel components because of its reusability So how to solve this problem

Answer 1

Just trying to make things simple. Can the Livewire component's view be rendered conditionally?

Example:

In your Livewire component

public $show_skeleton = true;

In the view of the Livewire component

    @if ($show_skeleton)
        
    @endif

In your Livewire component class

public function showSkeleton()
{
    $this->show_skeleton = true;
}

public function hideSkeleton()
{
    $this->show_skeleton = false;
}

Now use the above method to show and hide your skeleton.

Answer 2

According to the documentation, you can do this in your configuration. So you create a view that renders the component and then set it in the configuration. This also saves you from having to define the same placeholder on every component.

However, from the looks of it, you can pass in any string, so you can also just return the rendered view: view('view')->render(). Also, as before, you can just define a view in which to render the component.