example use case: after polling get how many pending article left, once it become zero, trigger event to ask article list to get latest data

article_list.html

<div 
    hx-get="/api/v2/{{ACTIVE_PROJECT_CODE}}/refresh_article_list"
    hx-trigger="finishArticleGeneration from:body"
    hx-select="#article_list_content"
    hx-target="this"
>
    <div id="article_list_content">
        <!--do something-->
    </div>
</div>

common.js

const HTMX_STOP_POLLING = 286;

window.pendingArticlesCountAfterRequest =
  function pendingArticlesCountAfterRequest(e) {
    const status = e.detail.xhr.status;

    if (status === HTMX_STOP_POLLING) {
      document.body.dispatchEvent(new Event("finishArticleGeneration"));
    }
  };

generating_count.html

<div 
    hx-get="/api/v1/pending_articles_count"
    hx-trigger="every 10s"
    hx-select="#pending_articles_count_content"
    hx-target="this"
    hx-on::after-request="pendingArticlesCountAfterRequest(event)"
class="header-menu">
    <!--do something-->
</div>