AI 摘要：该项目解决了前端开发中需要手动维护两套代码（业务组件与骨架屏组件）的痛点。通过在运行时（Runtime）分析真实组件的 DOM 结构，shimmer-from-structure 能够自动测量元素尺寸、获取 CSS 圆角属性，并生成与之完美契合的扫光动画效果。它支持动态数据注入、全局配置（Context API）、以及与 React Suspense 的无缝集成，极大地降低了 UI 加载态的维护成本。

1. 核心价值与功能特性
• 自动适配结构：无需预定义骨架屏，运行时自动分析组件 DOM。
• 零维护成本：组件布局改变时，骨架屏自动更新，无需手动同步。
• 像素级精确：通过测量实际元素尺寸生成占位块。
• 样式自动提取：自动检测 CSS 中的 border-radius（圆角），确保头像等圆形元素正确显示。
• 感知优化：加载时保留容器背景色和边框，仅对文本和图片内容进行遮盖。

2. 使用模式与 API
• 静态内容包裹：简单的组件直接使用 <Shimmer loading={true}> 包裹即可。
• 动态数据支持：通过 templateProps 属性注入模拟数据，使组件在无真实数据时也能撑开正确的布局结构。
• Suspense 集成：可直接作为 Suspense 的 fallback，利用 React 的生命周期自动处理挂载与卸载。
• 全局配置：提供 ShimmerProvider，允许在应用顶层统一配置扫光颜色、背景色及动画时长等

3. 技术实现原理
• DOM 测量：利用 useLayoutEffect 同步测量所有叶子元素的 getBoundingClientRect()。
• 属性捕获：通过原生 API 获取计算后的 CSS 样式，确保骨架块与原元素形状一致。
• 动画注入：基于测量数据创建绝对定位的扫光层，并应用线性渐变动画。
• 透明处理：加载状态下将真实内容的 color 设为 transparent，从而隐藏文字但保留容器布局。

4. 最佳实践与局限性
• 细粒度控制：建议为不同的业务模块分别包裹 Shimmer，以实现独立的加载状态。
• 性能建议：尽量保持 templateProps 简单，避免在测量阶段进行复杂逻辑运算。
• 已知限制：无法深入捕获 SVG 内部的路径形状；对于异步渲染（如某些 Canvas 图表）需要显式指定容器高度。

GitHub

GitHub - darula-hpp/shimmer-from-structure: Universal UI skeleton generator for React, Vue and Svelte. Auto-adapts to your component…

Universal UI skeleton generator for React, Vue and Svelte. Auto-adapts to your component structure with zero maintenance and pixel-perfect accuracy. - darula-hpp/shimmer-from-structure