BuilderComponent contentLoaded callback timing issue

Technical Questions
1

Hi Builder Team -

I currently have Builder integrated with my Rails/React app. I want to run some JS (from balanceText) after all Builder content has been loaded/rendered on the page.

I found the contentLoaded() callback for BuilderComponent however, it is not consistently running after all content is loaded, meaning my JS function does not work since it relies on certain elements being present. If I add a setTimeout(() => jsFunction(), 100); then it works so it seems like there is a timing issue with when contentLoaded is called.

Is there a way to consistently run a callback after all content is loaded? Thanks!

export default function BuilderPage({ content, theme }) {
  const handleContentLoaded = () => {
    import('~/javascripts/utils/balanceText').then((module) => {
      module.default();
    });
  };

  return (
    <>
      <BuilderComponent
        content={content}
        contentLoaded={() => handleContentLoaded()}
        data={{ theme: theme }}
        locale='default'
        model='page'
      />
    </>
  );
}
2

Hi @lburtness, Welcome to Builder.io Forum!

I worked through this, and seems any callback mentioned contentLoaded would call after the page loads. Maybe something is wrong with how you’ve imported the balance text. You can use a simple console statement to verify builder functionality and it would work.

Let me know if you’ve further questions or if it doesn’t work!