JoaoSetas

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 :slight_smile:

Where Next?

Popular in Proposals: Ideas Top

beno
There appears to be no way to escape whitespace in word lists, so sigil_w (and sigil_W) can only be used for lists of single words. Of co...
New
andypearson
Hey all, I have been working on some performance improvements for the Phoenix application I work on. As part of this, through trial and...
New
sevensidedmarble
All the pieces are there to execute arbitrary JS commands from the server. You can put them on a data property and call them from the cli...
New
sevensidedmarble
Hello all, Apologies if this has been proposed before I guess, but I have a very simple one: With the increasing importance of LV, I th...
New
BartOtten
I’d like to propose that we refrain from using the term "DeadView" as the opposite of “LiveView” and instead choose an alternative. A new...
New
Matsa59
Lets start by a story, I work with a team on a pretty big CMS with lots of modules. We split the cms using umbrella apps. So we have comp...
New
i-n-g-m-a-r
When debug_errors: true javascript can be executed. <html> <body> <form id="xss" action="https://domain.com/NateMai...
New
superchris
Currently there is no out of the box way to support DOM Custom Events in phoenix. I’ve created a separate library to do this, but I’d lov...
New
dibok
Hi, I’m trying to use phoenix.js in my Qt QML project which has it’s own buildin JavaScript engine. Problem is that (what I googled so f...
New
MatinDevs
Currently, there are ongoing discussions about enhancing Phoenix LiveView, particularly focusing on improving performance and user experi...
New

Other popular topics Top

TunkShif
This post is an instruction guide to help you setup your Neovim for Elixir development from scratch. It includes general information on h...
274 41539 114
New
chrismccord
Phoenix 1.4.0 released Phoenix 1.4 is out! This release ships with exciting new features, most notably with HTTP2 support, improved deve...
688 30877 112
New
msaraiva
Surface is an experimental library built on top of Phoenix LiveView and its new LiveComponent API that aims to provide a more declarative...
564 43622 214
New
Emily
I have VueJS GUIs with the project generated using Webpack. I have Elixir modules that will need to be used by the VueJS GUIs. I forese...
New
belgoros
I’m not a pro in using Regex and can’t figure out why the following behaviour happens, especially if we take into account the difference ...
New
aalberti333
As the title describes, I’m trying to run Enum.map() over a list of key/value pairs, where the value is a map. My data looks like this: ...
New
fayddelight
I tried installing elixir 1.11.2 erlang 23.3.4 via asdf in my zsh shell. Enabled the versions locally and globally. When I list them ...
New
dblack
I’ve got an issue with an app and I’ve no idea of how to troubleshoot it. I’m hoping someone here might have seen something similar. I p...
New
boundedvariable
I am going through the kafka architecture. All the features what the kafka is providing are already in Erlang. I would like hear your opi...
New
rms.mrcs
Hi, I need to transform a list of numbers into a map where the keys are the indexes and the values are the original values of the list. ...
New

We're in Beta

About us Mission Statement