Uilora Feed
Social / news feed skeleton with a stories row and staggered post cards — avatar, content lines, optional image, and action pill rows.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| theme | "dark" | "light" | "dark" | Color palette. "dark" uses near-black cards; "light" uses white cards on a gray page background. |
| accentColor | string | "#10b981" | Brand accent applied as a subtle ring on story avatars and tint in the shimmer. |
| postCount | number | 4 | Number of post skeleton cards to render (clamped 2–6). |
| showStories | boolean | true | Shows or hides the horizontal stories/highlights row at the top of the feed. |
When to Use
Perfect for social platforms, news aggregators, content feeds, and community products. The alternating image/no-image pattern mirrors real feed variance, making the skeleton feel authentic rather than templated.
Best Practices
Set postCount to match the number of posts visible above the fold at your target viewport so the skeleton fills the screen exactly. Disable showStories for feeds without a highlights mechanic.
Why This Component Matters
Staggered entrance animations on each post create a natural cascade that communicates progressive loading. Users perceive content as arriving in a sensible order, reducing anxiety during long data fetches.
FAQ
QWhich posts show an image bone?
Posts at even indices (0, 2, 4...) include an image bone. Odd-index posts skip the image, matching the natural variance of a real feed.
QHow do I adjust the story count?
The stories row renders 6 items. Fork the component and change the `Array.from({ length: 6 })` call to your preferred count.
QCan I use this for a comment thread?
Yes — disable showStories and set postCount to match your comment depth. Nest PostCard components for threaded replies.
Related Components
Broken Shard Gallery
Images explode outward from center into a chaotic gallery layout as you scroll.
Velocity Smear
Gallery that skews and stretches in real-time based on scroll velocity — the faster you scroll, the more the images smear.
Curtain Split
Two image panels split apart like stage curtains on scroll, revealing editorial text content hidden beneath.