JoaoSetas
Prevent phx:page-loading-stop from stoping another phx:page-loading-start
Hi,
I recently encounter a problem when trying to push_event("page-loading-start", %{}) in my liveview.
I forced page-loading-start after handling a event in my liveview that calls Task.Supervisor.async, after the task ends it calls another event in my liveview to update the content of the page and to stop the page loading with push_event("page-loading-stop", %{}).
The problem is that the in the first event of the liveview i update content in the and i think phoenix is sending a page-loading-stop that stops my call to page-loading-start.
I made a change in the App.js so that it has a count of how many page-loading-start calls it has and only calls topbar.hide() when then count is 0.
Here is an example representing my code:
def handle_event("test", %{}, socket) do
target = self()
Task.async(fn ->
:timer.sleep(1000)
send(target, :render_response)
end)
{:noreply,
assign(socket,
text: "loading..."
)
|> push_event("page-loading-start", %{})}
end
def handle_info(:render_response_chunk, socket) do
{:noreply,
assign(socket,
text: "finished"
)
|> push_event("page-loading-start", %{})}
end
My implementation:
window.phxPageLoadingCount = 0
window.addEventListener("phx:page-loading-start", _info => window.phxPageLoadingCount++ && topbar.show(300))
window.addEventListener("phx:page-loading-stop", _info => window.phxPageLoadingCount && !--window.phxPageLoadingCount && topbar.hide())
I don’t know the impact this can have… But i think this could be a nice logic to have in the topbar, especially when calling the page loading events manually.
If this suggestion is accepted i can implement it and create the Pull Request ![]()
Popular in Proposals: Ideas
Other popular topics
Categories:
Sub Categories:
Forums
Popular Tags
- #ecto
- #liveview
- #troubleshooting
- #learning-elixir
- #deployment
- #library
- #erlang
- #testing
- #genserver
- #mix
- #absinthe
- #remote-other
- #otp
- #plug
- #how-to-question
- #macros
- #postgres
- #channels
- #elixirconf
- #exunit
- #discussion
- #code-sync
- #javascript
- #podcasts
- #onsite
- #dialyzer
- #docker
- #authentication
- #umbrella
- #full-time-contract
- #podcasts-by-brainlid
- #ecto-query
- #elixir-ls
- #phoenix_html
- #iex
- #blog-post
- #graphql
- #genstage
- #ai
- #websockets
- #supervisor
- #advent-of-code
- #elixirconf-us
- #distillery
- #processes
- #forms
- #api
- #metaprogramming
- #security
- #performance








