phoenix_live_reload Browser freezing for two minutes on LiveReload

Our team is experiencing an intermittent bug when LiveReload refreshes. The browser sometime hangs for two minutes exactly when the page refreshes after a template or CSS change. Observer shows a spike in CPU usage at the beginning of the refresh, and then the browser hangs in waiting. After 2 minutes, the page load completes.

Killing the server and starting again seems to fix this temporarily, until it happens again. It seems to exhibit in both Chrome and Firefox.

There's a thread on the Elixir Forum about this, with some others experiencing similar symptoms. https://elixirforum.com/t/backend-sent-response-in-log-but-browser-stuck-loading-for-precisely-2-minutes/46864

Is there a known issue that might be related to this? Can we help provide any more debug info? What would be useful?

Sep 15 '22 15:09 tomtaylor

@tomtaylor Had same issue! Try to set interval to 1 second in your dev.exs. Default 100ms is not enough.

config :my_app, MyAppWeb.Endpoint,
  live_reload: [
    interval: 1000,

Oct 02 '22 21:10 sharpfun

@tomtaylor Had same issue! Try to set interval to 1 second in your dev.exs. Default 100ms is not enough.

Thanks! I couldn't quite follow why that would be the case. It looks like the default is for the client to wait 100ms after receiving a message from the server that the compile assets have updated. Do you know why extending this to 1s helps?

Oct 07 '22 13:10 tomtaylor

Glad that it works! :smile: I suppose that template or css isn't compiled fast enough for reload request, and server was not responding. If you set interval higher to 1 second, then client tries to reload page only after 1 second (instead of 100ms).

Oct 07 '22 16:10 sharpfun