WIP: BETA 1.12: CLS in Nestable tabs and accordion

Browser: Chrome 131.0.6778.205
OS: Windows
URL: Link

Hi bricks team,

1- In the nestable accordion element, if we use the Expand item indexes option, it will be applied with a delay on the front end.

2- In the nestable tabs element, the content of the tabs and the tab icon are rendered with a delay.

Hi @HOSEIN,

thank you. Yep, I see. The reason is that we open those items with JS, so when they first load, they are closed.

The same should actually happen even if you don’t use “Expand items”, right?

Matej

1 Like

Hi Matej,

If we don’t use Expand items, there will be no problem rendering the nestable accordion.

Hi,
yeah, in the old versions you had to have “Expand first item” control enabled. But the same was happening, since we expanded them with the JS as well.

Anyway, I’ve created an improvement task for this :slight_smile:

Thanks,
Matej

1 Like

Hi Matej :wave:,

Is this thread WIP? Honestly, I think I was a little too sensitive in reporting this issue. The page load affects the open accordion item a little, which is normal. On the other hand, the icons in the video may load with a slight delay, which causes skipping. But if we use SVG icons, the problem is completely solved. What do you think?

Thank you

Hi @HOSEIN,

you actually remembered me to change this topic from WAIT to WIP :sweat_smile:, because we have an improvement task for nested accordion open. I think it’s ok if we have it, and we could have a look at improving this in the future.

I’m not sure though to which part of this issue are you referring to here:

Best regards,
Matej

1 Like

you actually remembered me to change this topic from WAIT to WIP :sweat_smile:

Yes, when I saw it was WAIT, I went back to it to make sure it was really a bug🙂

I’m not sure though to which part of this issue are you referring to here:

In the video at the beginning of this report, the page load is accompanied by a jump, the main reason for which is the delay in loading the icons used in the nestable tabs elements. In fact, the icons used in that video are native bricks icons. However, if the icons are SVG, there is no delay in loading them.

And thanks for that! :slight_smile:

Ah, I understand it now. Yeah, SVG is loaded as is, on page load. While the “normal” icons need a stylesheet to load, then they show.

Matej

1 Like