Dealing with (SSE) trigger while swapping in progress

[christophenne]

Hi,

we'd like to use the SSE trigger functionality to refresh small parts of a page. Every now and then two events are coming in during a very short amount of time, sometimes the second event arrives at the client at a time, at which the swapping of the first event has not finished yet (i.e. the element with the refresh-trigger has been removed already, but the new version of it does not exist in the DOM yet). In this case the second event does not trigger a refresh.

Example:

<div id="item-1234" 
  hx-trigger="sse:refresh-item-1234" 
  hx-get="/items/1234" 
  hx-select="#item-1234" 
  hx-target="#item-1234">
...
</div>

Timeline observed via htmx.logAll:

1. event refresh-item-1234 is received
2. htmx:beforeCleanupElement is executed for div#item-1234 and its children
3. event refresh-item-1234 is received again, but the trigger sse:refresh-item-1234 is not having any effect because it does not exist
4. swapping of the first event happens and is finished, showing outdated data

Is there a way to delay the processing of the second event until there is no swapping progress?

One solution I have thought of is to not swap the entire div here, but instead a child div, such that div#item-1234 always stays present on the page.
But this does not help in cases where this is not possible, e.g. when htmx is currently in the progress loading the current page due to a full page swap via hx-boost, coming from another page. And this scenario is even more likely since swapping the complete page takes longer.

[christophenne]

We solved this by having the sse:refresh-item-1234 trigger always present on the page (in an outer element), this seems to work. The problem of an event arriving during page load remains unsolved for now, but it seems in our use cases this is less likely to happen.