How to DOM changed page content after only using DOMContentLoaded

Question

I'm working on a cargocollective based system and trying to change the existing project labels using javascript. right now when users enter the address there are 1 or 2 seconds where the labels transform from one stage to another, so the user first see:



and then after a few seconds see:



Is there any way to modify it so the users will not see the change when page load finished? this is my current code:

<script>
document.addEventListener('DOMContentLoaded', (event) => {
  window.setTimeout(() => {
      let titles = document.querySelectorAll(".thumbnails .title span");
    let titlesArray = Array.from(titles);
    let tArray = [titlesArray.length];
    titlesArray.forEach(el => {
      let titleSplit =[];
      titleSplit = el.textContent.split('---');
      for (let i = 0; i < tArray.length; i++)
      {
        el.textContent = "";
        for (let j = 0; j < titleSplit.length; j++)
        {
          el.innerHTML += `${titleSplit[j]}</br>`;
        }
      }
});
  }, 400);
});
</script>

A few things I need to mention:
1. The system allows inner js scripts only, it does not allow HTML editing, which means only code that is inserted between script tags
2. The solution has to be in javascript for future uses.
3. The "---" is for cosmetic use only and will replace with an SVG image.
4. script tags location is in the middle of the file. also, there is a lot of content between the script and the end of the page. 5. for view-source: webpage in context

Answer 1

I've managed to fix my issue and decide to post it here for others who may need it:
Some clarifications before:

1. As I mentioned before CargoCollective allows adding inner js scripts via the option of HTML editing only (code must be inserted between script tags).
2. The "---" placeholder (in my original question) was removed since the designer asked me to, so the solution doesn't include it.
3. The specific helper function 'thumbnails_render_complete' wasnt mention in the documentation of CargoCollective, I've got it from their support during a chat session.

Hope it will help someone

<script>
  Cargo.Event.on('thumbnails_render_complete', function(pid) {
    let titles = document.querySelectorAll(".thumbnails .title span");
    let titlesArray = Array.from(titles);
    let tArray = titlesArray.length;
    titlesArray.forEach(el => {
      let titleSplit =[];
      titleSplit = el.textContent.split('-');
      for (let i = 0; i < tArray; i++) {
        el.textContent = "";
        for (let j = 0; j < titleSplit.length; j++) {
          if ( j === 0 ) {
            el.innerHTML += `${titleSplit[j]}</br>`;
          }
          else {
            let subtext = titleSplit[j];
            el.innerHTML += `${subtext}</br>`;
          }
        }
      }
    });
  });
</script>