[ic-datatable]: Truncation functionality may be freezing UI on load

[jd239]

Summary of the bug

I think the truncation tooltip functionality may be temporarily freezing the UI. This is dependent on the number of cells the truncation functionality has to be applied to. I have created Stackblitz to demonstrate the performance tab reporting UI bottlenecks.

In order to see bottlenecks within the Performance tab:

1. Open the Stackblitx preview in a new tab
2. Open up the DevTools > Performance tab within the preview
3. Press the record button in the top left of the Performance tab
4. Refresh the preview page
5. Stop the recording after the page has reloaded.

On the left of the performances should be an Insights section suggesting there is an issue with the "forced reflow" of the UI. Clicking for more detail should adjust the flame chart to pinpoint the bottlenecks.

In addition to the functions on the left, I've also noticed other instances where addLineClampCSS is causing the bottleneck:

It looks like a "forced reflow" is due to querying an element, dynamically updating the styling of an element (i.e. setting a line-clamp), which forces the browser to make DOM updates then querying the element later on.

I was able to discover the UI freezing by trying to click on a navigation link in the side navigation bar while returning a large number of records from the API and applying truncation. This is more evident when throttling the Network request to 3G.

Forced reflows.

For the addLineClamp issue, it seems like the solution is to make batch updates to the truncated cells rather than applying the truncation / DOM updates per cell passed to the [addLineClampCSS](https://github.com/mi6/ic-ui-kit/blob/main/packages/canary-web-components/src/components/ic-data-table/ic-data-table.tsx#L2146) method.

// Logically the code is doing something like
elements.forEach((element) => {
const height = element.scrollHeight;
     element.style.height = `${height * 1.5}px`
});

// It may be better for performance if the updating is done in a batch
const height = elements.map((element) => element.scrollHeight);
elements.forEach((el, i) => {
     element.style.height = `${height[i] * 1.5}px`
});

🖥 📱 Device

• Type: Desktop
• Device: Laptop
• OS version: Windows 11
• Browser version: Chrome 141

🧐 Expected behaviour

Reduced number of UI bottlenecks which prevent the UI from freezing up during truncation load

📝 Acceptance Criteria

If relevant, describe in full detail the different interactions and edge cases that the component or patterns needs to fulfil.

Given that data within datatable is truncated When the datatable loads
Then the UI should not freeze up

🚨 Urgency (low, medium or high)

If applicable, tell us how urgent it is that this issue gets resolved, based on the impact it has on your team's work or project timeline.

Medium

Additional info

Tell us anything else useful to help us fix or understand the problem.