Hy @pullrich,
Thank you for taking the time and for responding.
Yes, it solved my problem
I also realized what the problem was, the next day after I posted the question.
Taking the solution one step further, I decided to use different, custom JavaScript events to be triggered for table loading, phx:table-loading-start
and phx:table-loading-stop
:
- After the initial user event is handled by any of the three
LiveComponent
s (clicking on the sort header, on the filter button, or on the page number), right after sending the:update
event to the parent LiveView inhandle_event/3
, I trigger aphx:table-loading-start
event:
...
send(self(), {:update, opts})
{:noreply, push_event(socket, "table-loading-start", %{})}
...
- Then, in the parent
LiveView
, after the final data is available and is ready to be sent to the browser, inhandle_params/3
, I trigger aphx:table-loading-stop
event:
def​ handle_params(params, _url, socket) ​do​
socket =
socket
|> parse_params(params)
|> assign_meerkats()
|> push_event("table-loading-stop", %{})
{​:noreply​, socket}
​end
And then, I handle these event in JavaScript by starting and stopping the page loading progress indicator, while also preventing the handler of the LiveView’s phx:page-loading-stop
event to stop the progress if it has been started by a phx:table-loading-start
event:
window.tableLoading = false;
window.addEventListener('phx:table-loading-start', info => {
window.tableLoading = true
topbar.show()
})
window.addEventListener('phx:table-loading-stop', info => {
window.tableLoading = false
topbar.hide()
})
window.addEventListener("phx:page-loading-start", info => {
topbar.show()
})
window.addEventListener("phx:page-loading-stop", info => {
if (!window.tableLoading)
topbar.hide()
})
I think this is a cleaner solution, because it separates the table loading events, which are spanning across more than one LiveView event → handle_event cycle, from LiveView events which are more fine grained.
But I admit its not the cleanest approach, and I am still looking to improve it.
I feel that more control over the page loading (and maybe other kinds of loading) events should be exposed by LiveView itself, for situations like this.
What do you think?