`wait` attributes
- Dominant language
- JavaScript
- Stars
- 4
- Forks
- 0
- PR merge metrics
- No merged PRs in 30d
Description
Mitigate FOUC (Flash of [Unstyled](https://en.wikipedia.org/wiki/Flash_of_unstyled_content) and/or Unscripted Content)
```html
```
In the future, this behavior will be automatic. It will `wait` when there is no inferred value #3.
---
It also serve as a way for conditional hydration when the attribute value is specified
- [ ] `wait="visible"` fetch resource once it has entered the [viewport][]. This uses an [IntersectionObserver][] internally to keep track of visibility.
- [ ] `wait="idle"` fetch resource once the page is done with its initial load and the `requestIdleCallback` event has fired. If you are in a browser that doesn’t support [requestIdleCallback][], then the document [load][] event is used.
- [ ] [Listening to media query rules][media query example]. For example, `wait="(max-width: 64rem)"` will fetch resource once the [viewport][] width is below 64rem (useful for sidebar toggles and carousel)
- [ ] Waiting specific event being triggered. For example, `wait="on:click"` will fetch resource once any of the elements that listen to event _click_ are clicked (i.e ``)
[IntersectionObserver]: https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver
[requestIdleCallback]: https://developer.mozilla.org/en-US/docs/Web/API/Window/requestIdleCallback
[load]: https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event
[viewport]: https://developer.mozilla.org/en-US/docs/Glossary/Viewport
[media query example]: https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList/change_event#example
Contributor guide
No contributing guide indexed for this repository
Assessment
This issue has not been assessed yet.