skip to Main Content

I’d like to add skeleton from my laravel component inside livewire 3 placeholder
What i’ve tried so far :

Livewire class by including the laravel component :

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

the above method renders nothing,

However when i tried to using direct HTML like these :

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;
    }

It works perfectly,
I prefer using the laravel components because its reusability
So how to solve this

2

Answers


  1. Just trying to make it simple. Can you make Livewire component’s view on conditional rendering.

    Example :

    In your Livewire component

    public $show_skeleton = true;
    

    In your Livewire component’s view

    <div>
        @if ($show_skeleton)
            <x-skeleton />
        @endif
    </div>
    

    In your Livewire component class

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

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

    Login or Signup to reply.
  2. According to the docs you can define a view in your config. So, you can create a view that renders your component, then set it in the config. This also saves you having to define the same placeholder on each component.

    But, by the looks of things you can pass in any string, so you can also just return a rendered view: view('view')->render(). Again, same as before, you can just define a view where you render your component in.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search