Problem
Three issues in the Separator and Skeleton primitive components affect composability and correctness.
1. Separator from src/components/ui/Separator.tsx is not exported from index.ts
Separator is a primitive component that exists in the ui/ folder but is not included in src/components/index.ts. Consumers who want to use it for dividing panel sections must import from an internal path.
2. SkeletonCard rows prop creates a key warning when rows changes
SkeletonCard uses Array.from({ length: rows }).map((_, i) => <Skeleton key={i} />). Using key={i} means changing rows does not trigger remounting but index-reassignment — which can cause incorrect animation states when the row count decreases. Keys should be stable when rows doesn't change and trigger remount when it does.
3. Skeleton has no shimmer animation variant — only animate-pulse
animate-pulse (opacity pulsing) is the only animation. A shimmer effect (a light sweep across the skeleton) is more widely used and less distracting for frequent content refreshes. An optional variant="shimmer" prop would give consumers a choice.
Solution
- Add
export { Separator } from "./ui/Separator" to src/components/index.ts.
- Use a stable key derived from position:
key={\skeleton-row-${rows}-${i}`}to force remount whenrows` changes.
- Add
variant?: "pulse" | "shimmer" prop to Skeleton; implement shimmer via @keyframes CSS animation.
Acceptance Criteria
Note for Contributors: Write a clear PR description. Include a screen recording of the shimmer animation and confirm no React key warnings when changing rows.
Problem
Three issues in the
SeparatorandSkeletonprimitive components affect composability and correctness.1.
Separatorfromsrc/components/ui/Separator.tsxis not exported fromindex.tsSeparatoris a primitive component that exists in theui/folder but is not included insrc/components/index.ts. Consumers who want to use it for dividing panel sections must import from an internal path.2.
SkeletonCardrowsprop creates a key warning whenrowschangesSkeletonCardusesArray.from({ length: rows }).map((_, i) => <Skeleton key={i} />). Usingkey={i}means changingrowsdoes not trigger remounting but index-reassignment — which can cause incorrect animation states when the row count decreases. Keys should be stable whenrowsdoesn't change and trigger remount when it does.3.
Skeletonhas noshimmeranimation variant — onlyanimate-pulseanimate-pulse(opacity pulsing) is the only animation. Ashimmereffect (a light sweep across the skeleton) is more widely used and less distracting for frequent content refreshes. An optionalvariant="shimmer"prop would give consumers a choice.Solution
export { Separator } from "./ui/Separator"tosrc/components/index.ts.key={\skeleton-row-${rows}-${i}`}to force remount whenrows` changes.variant?: "pulse" | "shimmer"prop toSkeleton; implement shimmer via@keyframesCSS animation.Acceptance Criteria
Separatoris importable from"sorokit-ui"rowsinSkeletonCardremounts rows correctly without key warningsSkeleton variant="shimmer"renders a sweep animationnpm run buildpasses