How to run code after page has rendered

Development

AI-generated summary

In the discussion How to run code after page has rendered, pfaffman wants to remove parentheses from span.category-topics--posts-count using an api.onPageChange() call, but it’s running before the elements are rendered. merefield suggests that this won’t work and recommends customizing the component via CSS or the Ember run loop, or forking the component. pfaffman acknowledges that forking the component is the best approach, citing laziness as the initial reason for not doing so.

1

I want to remove the parenthesis from span.category-topics--posts-count (rendered by GitHub - discourse/discourse-right-sidebar-blocks · GitHub). I’m trying this api.onPageChange() call, but it’s not getting any countSpans, I think because it’s running before the other theme component has put them on the page.

What can I do? :crying_cat:


  api.onPageChange(() => {
    console.log("page changed");

    const countSpans = document.querySelectorAll(
      "span.category-topics--posts-count"
    );
    console.log("spans", countSpans);
    countSpans.forEach((span) => {
      const currentText = span.textContent.trim();
      const newText = currentText.replace(/[()]/g, "");
      span.textContent = newText;
      const number = parseInt(newText);
      if (isNaN(number)) {
        span.style.padding = "0px";
      } else if (number < 10) {
        span.style.padding = "0px";
      } else {
        span.style.padding = "0px 3px";
      }
    });
  });
});
2

I don’t believe that’s going to work.

you must perform these things via CSS or within the Ember run loop.

what’s stopping you forking that component and customising it to your taste under a different name, loading in a separate Theme Component and then adding it by name in RSB?

3

Laziness, mostly. And when I started it was just going to be a little css that would likely be static and they’d not need to maintain the fork, but yeah, it’s now obviously silly not to fork it.

Thanks