Automatically clearing flash messages in Phoenix LiveView

Phoenix Forum Chat / Discussions
, ,
1

Hey, I created a hook to automatically clear flash messages after 5 seconds, in case it’s of anyone’s interest :slight_smile:

Here’s the code

// app.js
let liveSocket = new LiveSocket("/live", Socket, {
  // ...
  hooks: {
    AutoClearFlash: {
      mounted() {
        let ignoredIDs = ["client-error", "server-error"];
        if (ignoredIDs.includes(this.el.id)) return;

        let hideElementAfter = 5000; // ms
        let clearFlashAfter = hideElementAfter + 500; // ms

        // first hide the element
        setTimeout(() => {
          this.el.style.opacity = 0;
        }, hideElementAfter);

        // then clear the flash
        setTimeout(() => {
          this.pushEvent("lv:clear-flash");
        }, clearFlashAfter);
      },
    },
  },
});

I also created a post on dev.to with more details: Automatically clearing flash messages in Phoenix LiveView - DEV Community

12 Likes
2

Simple and works well. Thanks!

1 Like
3

It’s a nice solution! However, while testing it by triggering an event that causes a flash notification multiple times within the preconfigured 5 seconds, I consistently encountered the following error:

view.js:1521 Uncaught (in promise) Error: unable to push hook event. LiveView not connected
    at _View.pushHookEvent (view.js:1521:9)
    at _ViewHook.pushEvent (view_hook.ts:388:35)
    at hooks.js:19:12
pushHookEvent @ view.js:1521
pushEvent @ view_hook.ts:388
(anonymous) @ hooks.js:19
setTimeout
mounted @ hooks.js:17

So, I slightly modified it, probably not perfectly, by wrapping this.pushEvent in the following if clause:

setTimeout(() => {
  if (this.view && this.view.isConnected()) {
    this.pushEvent("lv:clear-flash", { key: this.el.dataset.key })
  }
  this.el.style.display = "none"
}, 5000)
3 Likes
4

Interesting edge case! It never happened to me, but I never really stress tested my solution. Thanks for sharing the issue and your solution!

1 Like