aweary / aweary/react-perimeter
Moving content breaks perimeter
- Dominant language
- JavaScript
- Stars
- 1k
- Forks
- 27
- PR merge metrics
- No merged PRs in 30d
Description
Hi,
First of all, thanks for the lib. It's simple but smart!
However, one of my concerns is that when the content is moving, it actually breaks the perimeter since `this.bounds` is not updated. (I've checked the ongoing PRs and they dont seem to address this problem)
The resize window event is a first step but is not enough.
I originally thought about adding the componentDidUpdate lifecycle method but if the updated content is not in the component itself it won't solve the issue (see updated demo in my fork https://github.com/JulienPradet/react-perimeter).
One way, though, to address this problem would be to update bounding shapes using a requestIdleCallback (in order to avoid freezing important stuff going on) and debouncing it (since the mouse's movements fire a lot of events) directly. This would be doable in the provider that will land in @jnsdls 's PR. This solution allows people not to think about updating their shapes and keeps the API simple. However it might lead to performance issues since there would be ton of updates.
If people want a more manual way to update those, the automatic update could be disabled and the update method could be exposed in the context in order for them to call it in their own component lifecycles.
If what I'm talking about is not in the scope of the lib, feel free to ignore it.
Additionnally, if what I'm saying is not clear enough I could land a POC if you're interested in it.
👋
Edit: Oh, and thinking about it, the perimeter could check the hover event on the registered DOM node too! This way, even if the perimeter is broken, the preload would still launches on hover which is still nice to have. :slightly_smiling_face:
Contributor guide
No contributing guide indexed for this repository
Research direction
Start by reviewing the provider proposed in the referenced ongoing PR and the updated demo in the reporter’s fork, then compare them with the current resize-window behavior. Determine which approach is in scope—automatic debounced bounding-shape updates, a manual context update, or hover fallback—and validate that moving external content no longer breaks the perimeter without unacceptable event churn.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, react
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 30/100