Is there a good way to detect if hydration ends

[snake-py]

I have a submit button, which should only be enabled once hydration is done. Is there a good way to detect this? Or do need to do my own logic for it using +onHydrationEnd.ts?

[brillout]

You currently need your own logic for that.

Ideas?

How about a new setting?

// pages/+config.js

export default {
  // Adds the class "hydrated" to the body tag once hydration is finished
  onHydrationEndClass: 'hydrated'
}

[snake-py]

@brillout hmm - I think rather maybe a data-vike-hydrated=true|false would make more sense. But is there no way to have that maybe in pageContext? I could maybe help out here?

[brillout]

Do you have an example of how you'd use data-vike-hydrated?

Maybe I'm missing something, but I feel like a global class body.hydrated would be a superior solution 🤔

[snake-py]

I honestly see the only difference between the two options, that hydrated is a pretty generic class, and maybe people would have this as a class for other stuff in their css. Basically, using data attributes would defeat that collision.

to me it does not matter if it is:

const isHydrated = document.querySelector('[data-vike-hydrated]')
const isHydrated = document.querySelector('.hydrated')

Or am I missing something?

[brillout]

I see. My idea was that you can change the name of the class:

// pages/+config.js

export default {
  // Avoid collision
  onHydrationEndClass: 'page-is-hydrated'
}

In the next major release the default value would be changed from null to 'hydrated', while the user can change/remove the class if it collides.

[brillout]

const isHydrated = document.querySelector('.hydrated')

It only adds the class to body, so wou would do this instead:

const isHydrated = document.querySelector('body.hydrated')