DrSensor / DrSensor/nusa

`wait` attributes

Open
#6 0 comments 0 reactions 0 assignees View on GitHub
enhancement priority: high
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.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.