Add debounce for live reloading

[btkostner]

I'm currently using vite for building assets and everything is working correctly. The biggest down side is that phoenix_live_reload detects multiple file changes and reloads multiple times when I save a .html.heex file (tailwind jit).

[info] GET /
[debug] Processing with ShortyWeb.HomepageController.index/2
  Parameters: %{}
  Pipelines: [:browser]
[info] Sent 200 in 12ms
[debug] Live reload: priv/static/assets/main.js
[debug] Live reload: priv/static/assets/vendor.js
[debug] Live reload: priv/static/assets/main.css
[debug] Live reload: priv/static/assets/main.js
[debug] Live reload: priv/static/assets/main.js
[debug] Live reload: priv/static/assets/vendor.js
[debug] Live reload: priv/static/assets/main.css
[debug] Live reload: priv/static/assets/vendor.js
[debug] Live reload: priv/static/assets/main.css
[debug] Live reload: priv/static/assets/main.js
[debug] Live reload: priv/static/assets/vendor.js
[debug] Live reload: priv/static/assets/main.css
[debug] Live reload: priv/static/assets/main.js
[debug] Live reload: priv/static/assets/main.js
[debug] Live reload: priv/static/assets/main.css
[debug] Live reload: priv/static/assets/vendor.js
[debug] Live reload: priv/static/assets/main.css
[debug] Live reload: priv/static/assets/vendor.js
[debug] Live reload: priv/static/assets/main.js
[debug] Live reload: priv/static/assets/vendor.js
[debug] Live reload: priv/static/assets/main.css
[debug] Live reload: priv/static/assets/main.js
[debug] Live reload: priv/static/assets/main.js
[debug] Live reload: priv/static/assets/vendor.js
[debug] Live reload: priv/static/assets/main.css
[debug] Live reload: priv/static/assets/vendor.js
[debug] Live reload: priv/static/assets/main.css
[debug] Live reload: priv/static/assets/main.js
[debug] Live reload: priv/static/assets/vendor.js
[debug] Live reload: priv/static/assets/main.css
[debug] Live reload: priv/static/assets/main.js
[debug] Live reload: priv/static/assets/main.js
[debug] Live reload: priv/static/assets/vendor.js
[debug] Live reload: priv/static/assets/main.css
[debug] Live reload: priv/static/assets/vendor.js
[debug] Live reload: priv/static/assets/main.css
[debug] Live reload: priv/static/assets/main.js
[debug] Live reload: priv/static/assets/vendor.js
[debug] Live reload: priv/static/assets/main.css
[debug] Live reload: priv/static/assets/main.js
[debug] Live reload: priv/static/assets/main.js
[debug] Live reload: priv/static/assets/main.css
[debug] Live reload: priv/static/assets/vendor.js
[debug] Live reload: priv/static/assets/vendor.js
[debug] Live reload: priv/static/assets/main.css
[info] GET /
[debug] Processing with ShortyWeb.HomepageController.index/2
  Parameters: %{}
  Pipelines: [:browser]

I've looked at the backend Filesystem dependency and noticed that both the Linux and Windows backends do not have any sort of option for debouncing these events, so I think the optimal solution here would be to add a small configurable debounce for detecting file change updates in this project.

I can open an example repository for this in a couple of days.

[josevalim]

@btkostner I started to reply saying how we could implement this in the channel... and then I got so involved with the implementation that I decided to give it a try. In master you can now specify a debounce: ... in milliseconds in your config/dev.exs under the live reload key. Let me know how it goes!

[btkostner]

@josevalim That was fast! I can confirm master with a debounce of 150 cuts down on the live reloads significantly.

Thank you! 🎊 ❤️

[btkostner]

After looking into this more (and developing for 4+ hours) I think it may actually be a process leak in my Vite setup. I'm going to guess something like tailwindlabs/tailwindcss#4997 caused a bunch of processes to stay running and caused the huge live reload trail 😬 Sorry I didn't notice this earlier.

[josevalim]

That is likely it, yeah. I will leave the feature in anyway, thanks! :)

[cdock1029]

This fix was very useful to solve the same sort of problem I observed when using Tailwind JIT setup, after following some of the LiveView 1.6+ tutorials. Wondering if some minimal debounce should be default going forward.. without it my terminal would have near 100 or more of

[debug] Live reload: priv/static/assets/app.css

Or I will suggest updating the tutorials when this lands.

[kuon]

I hit a similar issue with tailwind.

It took me a while to understand the problem. When saving my app.css sometimes, I would get an empty stylesheet.

It seems that tailwind is opening the file for writing, which immediately triggers browser reload, tailwind then takes about 120ms to write it. Setting debounce to 150ms fixes the issue. It doesn't happen all the time, because of the 100ms default interval, if the interval happens just after tailwind started writing, then the style is blank but if the interval happens at like T+80ms, it seems that tailwind has the time to finish before the browser reload. (this explains why it happens randomly)

While the 150ms debounce workaround works, it is a bit brittle.

I don't know if https://github.com/phoenixframework/tailwind could be modified to use an atomic write.