# Building Table Views with Phoenix LiveView: Add a load indicator that will start on user event (click) and end when data finishes loading

**URL:** <https://forum.devtalk.com/t/building-table-views-with-phoenix-liveview-add-a-load-indicator-that-will-start-on-user-event-click-and-end-when-data-finishes-loading/71699>\
**Category:** PragProg Customers\
**Tags:** suggestion, book-building-table-views-with-phoenix-liveview\
**Created:** [1 September 2022 18:33 UTC](https://forum.devtalk.com/t/building-table-views-with-phoenix-liveview-add-a-load-indicator-that-will-start-on-user-event-click-and-end-when-data-finishes-loading/71699 "2022-09-01T18:33:56Z")\
**Posts on this page:** 1\
**Showing post:** 3

<div class="post-metadata">

**Author:** ![djantea](https://forum.devtalk.com/user_avatar/forum.devtalk.com/djantea/32/4453_2.png) [@djantea](https://forum.devtalk.com/u/djantea)\
**Post date:** [4 September 2022 15:03 UTC](https://forum.devtalk.com/t/building-table-views-with-phoenix-liveview-add-a-load-indicator-that-will-start-on-user-event-click-and-end-when-data-finishes-loading/71699/3 "2022-09-04T15:03:23Z")

</div>

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 in `handle_event/3`, I trigger a `phx:table-loading-start` event:

```elixir
    ...
    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, in `handle_params/3`, I trigger a `phx:table-loading-stop` event:

```elixir
  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:

```javascript
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?

---

_[View the full topic](https://forum.devtalk.com/t/building-table-views-with-phoenix-liveview-add-a-load-indicator-that-will-start-on-user-event-click-and-end-when-data-finishes-loading/71699)._