Combine client directives?

[HummingMind]

Hello!
Is it possible to combine the client hydration directives, similar to 11ty? If not today, can this please be added as an enhancement?

For example, I would love to combine client:visible with client:idle, so it hydrates only when the component is in view and only when the main thread is not busy.

Thank you!

[ElMassimo]

Hi there!

Hadn't hear about that ability in 11ty, would you provide a link?

idle + visible could be added as a separate directive, but I'd like to see real use cases before considering adding it.

Would you describe the use cases that you have in mind and why the existing directives don't cover it?

[HummingMind]

Hello @ElMassimo!
Coming in 11ty 2.0

Under the usage section it says:
Add any number of loading conditions to this tag to control how and when the island is initialized. You can mix and match.

The idea was not to hydrate if the component is not visible, but when it does get into the viewport, to hydrate it with lower priority (hence the idle directive). I just wasn't sure if this was an easy thing to add or requires a lot of work. Sounds like it's the latter. :(

Thank you!

[ElMassimo]

If I understand correctly, in 11ty they allow you to hydrate when it's visible or idle, not when visible and idle.

In terms of UX, if an element is visible it's better to hydrate it fast, or it might not be "alive" when the user interacts with it.

Unless there are specific performance problems that you are trying to solve (in which case, I'm interested), using client:visible will give you good results.

[HummingMind]

Oh. I didn't look at the code, I assumed it was "and". 😆
No performance issues to address at this time.

Thank you for taking the time to reply!! Have a great day! 🍺