import-on-visibility
OfficialLazy-load components as they enter the viewport
Software Engineering#frontend#react#vue#visibility#web-performance#lazy-loading#intersection-observer
AuthorPatternsDev
Version1.0.0
Installs0
System Documentation
What problem does it solve?
Below-the-fold UI components can delay the initial render; this skill provides a pattern to lazily import or render those components only when they become visible.
Core Features & Use Cases
- Use the IntersectionObserver API to detect when a component enters the viewport
- Leverage libraries such as react-lazyload or react-loadable-visibility for quick implementation
- Provide a loading fallback component while the module or component loads
Quick Start
Install or import the visibility-based loader and wrap your component so it loads when it enters the viewport.
Dependency Matrix
Required Modules
None requiredComponents
Standard package💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: import-on-visibility Download link: https://github.com/PatternsDev/skills/archive/main.zip#import-on-visibility Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.