Radical lazy/defer load on collapsible column.
I have been 3 days trying to solve this and I couldn't found any way. Maybe is very simple.
I have a Table inside a Widget. That table has some visible rows and for each row one collapsible Panel/View/CustomColumn (whatever, I tried them all, don't really mind).
Now, the collapsible row shows a VERY EXPENSIVE GRAPH. So expensive that I don't want that graph to be prefetched, and I don't mind if the user needs to wait some seconds before getting it.
Don't want the system to ask for 30 of those graphs to the server just in case some user decides to look at one of them.
Now... with old school jquery/javascript I could create unique id's for recepting divs and make show buttons call some DOM modifier that asked the server for the graph data and then showed it into the div's location.
...but... with livewire... I have no control.
Things I tried:
I tried to find a way to get the info of Alpine.js isCollapsed variable into my CustomColumn extends Colum or into the blade view.... If I know if the given row element is collapsed, I might be able to return a very different thing.
Couldn't find a way to read Apline.js status from CustomColumn. Entangled did not work OR works with another object (maybe the widget) not with the column object.
Couldn't find a way to pass this isCollapsed variable value by any other way or using javascript or anyway. I see there are some ways to pass livewire vars to alpine.js, but I see no way to get that isCollapsible (or maybe a way to know if the dom subtree is hidden?)
Couldn't find a proper way to do a real lazy/defer method so I only get the Column when It ends being hidden in the dom. wire:init="loadData" do not work, first because it is not the Column method that is called, but the Widget method. Don't know how to inform the column method from the widget one.
1 Reply
Ok: Partially solved... I can created a PRIVATE (public does not work) attribute in my Widget class that saves the column I wanna pass the loadData function. So, instead of
public function table(Table $table): Table
{...
return $table->...->columns([ some columns, MyOwnColumn::make('someField') ])...
}
I have
private $myOwnColumn;
public function table(Table $table): Table
{...$this->myOwnColumn=MyOwnColumn::make('someField') ;
return $table->...->columns([ some columns, $this->myOwnColumn])...
}
This way, I can have a function loadData that calls $this->myOwnColumn->loadData(), and that last function is the one that sets readyToLoad flag in myOwnColumn so I can defer loading.
Yet... even if defer loading somewhat works... all columns are retreived at the same time, so it takes ages for them to load, even when I don't need them.
Unusable. The problem remains.