phantom-ui
Skeleton loaders that generate themselves from your real DOM
Classified in
Comments, support and feedback
- Frank5 months agoMaker
Thanks, good questions. 1. Responsive layouts: yes, it handles them. While loading is true, phantom-ui keeps a ResizeObserver and MutationObserver active. Any time CSS reflows the layout (breakpoint change, font load) it re-measures on the next requestAnimationFrame. If your framework swaps mobile/desktop components on a media query, the MutationObserver catches the DOM swap and re-runs. 2. Unknown image aspect ratios: the lib skips zero-size elements by default, but listens for image load events and re-measures once the browser has the natural dimensions. So the shimmer block shows up as soon as the image starts having a size. If you need the skeleton before the image even starts loading, set explicit width/height on the <img> (or use CSS aspect-ratio). There's also an escape hatch with data-shimmer-width="..." data-shimmer-height="..." to force dimensions on a still-empty element. The stagger and count attributes were the two things I kept wanting in other libs without ever finding a clean API for, so I made them first-class. If you try it on a project, ping me with whatever edge cases you hit. That's how every iteration so far has improved.
- 5 months ago
This is one of those "why didn't anyone think of this before" ideas. Every skeleton loader library I've used eventually drifts from the real UI — the padding changes, a new element gets added, and suddenly the shimmer doesn't align anymore. Phantom-ui eliminates that maintenance burden entirely by deriving the skeleton from the actual rendered DOM. The Web Component approach is the right call too. Framework-agnostic means it works whether you're shipping a React app, a Vue dashboard, or an HTMX-enhanced page. At 8kb, the overhead is negligible. A couple of thoughts: 1. How does it handle responsive layouts where the DOM structure changes at breakpoints? If the desktop layout has 3 columns and mobile has 1, does the skeleton adapt automatically? 2. Have you tested this with content that has images with unknown aspect ratios? The shimmer block for an image that hasn't loaded yet could be tricky to size correctly. The stagger transitions and count attribute are nice quality-of-life touches. Looking forward to trying this on my next project — the demo looks smooth.
About this launch
phantom-ui was launched by Frank in April 28th 2026.
- 5Upvotes
- 24176Impressions
- #2Week rank

