Feat/devtools#24
Merged
Merged
Conversation
Add cascade?: number to SkeletonConfig. Each bone's animation is delayed by bone.y × cascade ms, creating a top-to-bottom sequential wave effect. - Web: animationDelay applied to animated element for all modes (pulse, slide, beat on outer div; wave/shiver on inner shimmer div; shatter adds cascade offset on top of each cell's existing delay; drip uses cascade as the ms/px rate, replacing the hardcoded 3ms) - Native: per-bone Animated.Value driven with Animated.delay(bone.y × cascade) for pulse/slide/beat and wave/shiver; drip uses cascade as phase offset rate - Exposed on SkeletonTheme and skeletonConfig (per-component) - Default: 0 (all bones animate simultaneously, no behaviour change)
- shaker animation: rapid horizontal vibration burst then long rest - SkeletonBox: container rendered as semi-transparent bone (opacity 0.25, static) with children on top - SkeletonIgnore: elements always visible during skeleton, skipped from measurement entirely - cascade: bones now fade in progressively in addition to staggering their animation - fix: removed opacity:0 from hidden wrapper so SkeletonIgnore punches through overlay - feat: Bone.isStatic flag — SkeletonBox bones never animate - web/native: measureLayout detects __skl_box__ and __skl_ignore__ via data-testid/testID - native: nestLayouts builds nested BoneTree for SkeletonBox by geometric containment
Feat/cascade mode
- Apply animation delay directly to bones instead of fade-in wrapper - Cascade now staggers bone animations sequentially from top to bottom - Matches mobile cascade behavior for consistent UX across platforms Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- Remove wrapper div approach, let SkeletonBone handle cascade delay - SkeletonBone already applies animationDelay based on config.cascade - Each bone now starts animation with correct staggered delay - Matches mobile behavior exactly Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Feat/cascade mode
chore: version packages
Add an image and enhance the introduction section.
Wrap a block of text so it skeletons into several lines instead of one
solid block: ragged line widths, shortened last line.
- size presets (sm=2, md=3, lg=5) or explicit lines={n}
- align (left/center/right), inherited from the component's textAlign
- mode="words": each line split into word-sized bones
- deterministic widths (no flicker); web + React Native (iOS/Android)
feat: SkeletonParagraph : multi-line text skeletons
chore: version packages
Skelter detects nothing itself. The consumer provides live signals (network, battery, saveData, deviceTier, custom…) and a policy (when→use matrix or function). The resolver picks the animation; reduced-motion accessibility still forces none. - types: SkeletonConditions, AdaptiveRule, Adaptive, NetworkType, DeviceTier - SkeletonConfig: conditions + adaptive fields - core/adaptive.ts: pure resolver, zero deps - useSkeleton (web + native): resolved animation replaces animation in merge - 12 tests
Feat/adaptive animation
chore: version packages
chore: expand npm keywords for discoverability
chore: version packages
…onOverlay, match scoring)
…olish - bonesCount and x-ray overlay now derive from the measured boneTree directly instead of a visibility-gated bones cache, fixing components that mount already-loaded (e.g. list items with changed keys) - panel opens anchored to the bottom of the screen instead of mid-screen - panel pops open/closed from/to the floating button (scale+translate+fade) - per-component x-ray toggle from the devtools panel list (click row, not just the score badge) - light/dark theme toggle for the panel, default dark, slightly transparent - replaced emoji glyphs with vector icons (graceful text fallback if react-native-svg is absent) - shadow on the panel (was clipped by the sheet's overflow:hidden) - bounce/scale animation on the floating devtools button press
…dd global score to FAB, fix score chip shape - web scoring effect, hover x-ray overlay, and click-to-inspect overlay now use boneTree-derived bones instead of the visibility-gated cache, fixing components that mount already-loaded (matches the native fix) - web FAB badge now shows the average match score (like native), not just a mounted-component count - score/force badges use inline-flex + line-height:1 to render as proper pill chips instead of circles (was a monospace line-height quirk)
…nt, remove buggy per-component force toggle The legend/tooltip in InspectionOverlay was positioned relative to the skeleton's estimated height instead of the real rendered component's height, causing it to overlap card content when the real component was taller than its skeleton estimate. The per-component force-load button caused the devtools panel list to reorder and silently fail to trigger loading on the targeted instance; removed until the underlying registration timing issue is root-caused. Bumps the devtools-panel changeset to major (2.0.0): the per-component force capability advertised in that changeset no longer exists.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
What does this PR do?
Type of change
Checklist
npm run buildpassesnpm run typecheckpassesnpm testpassesnpx changeset)