I have a live view application that displays exchange rates data. Within the application, there is a box called “announcement” which shows scheduled or adhoc messages. Sometimes the message consists of around 3 lines, but occasionally it can be longer. However, the message box can only display up to 3 lines. So, when the message exceeds 3 lines, I decided to implement a scrolling animation behavior.

Here’s how I implemented it:

First, I added a Phoenix Hook to listen for when the message box is loaded. If the message box is loaded, I assume that there is a message to display.

Hooks.MessageBox = {
  mounted() {
    updateAnimationForMessage("message", this);
  },
  updated() {
    updateAnimationForMessage("message", this);
  },
};

Then, I added a JavaScript function to check the number of lines in the current message.

  const messageList = document.querySelector("#message-list");
  const content = messageList.querySelector("li:first-child");
  const cssCompute = window.getComputedStyle(content);
  context.pushEvent(event, {
    number_of_lines: Math.floor(
      parseInt(cssCompute.height) / parseInt(cssCompute.lineHeight)
    ),
  });
}

In the LiveView, I created a list with 10 rows of <li>Message here</li> elements using a for loop. These messages are scrolled up using CSS animation set to run infinitely. I push the number of lines count to the LiveView. The LiveView receives the number of lines and adds the CSS animation with inline styling.

["animation: message-slideup #{calculate_message_animation_time(number_of_lines) * 10}s linear infinite"]

I expected this code to work without any unexpected behavior or increased CPU usage. However, when I deployed it to production, I noticed that the CPU usage doubled with 200 clients accessing the application. Therefore, I am seeking help to resolve this issue.