Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Show HN: Phantom UI – Skeleton that measures your real DOM (Web Component, 8kb)

github.com

Post reply on HN
Print view View original

1–10 of 10 posts

Re: Show HN: Phantom UI – Skeleton that measures your real DOM (Web Component, 8kb)

#4

Post by Aejkatappaja »

flogy wrote: post #3

Looks very promising, one more star from me! What looks a bit odd is the React component being kebab-case instead of typical CamelCase.

Thanks! That's just how custom elements work in React, you use the HTML tag name directly.

React 19 has native custom element support so works as-is, no wrapper needed.

Keeping it as a single HTML tag across all frameworks is the whole point.

Re: Show HN: Phantom UI – Skeleton that measures your real DOM (Web Component, 8kb)

#5

Post by fraywing »

Gave you a star as well. Love the idea and the demo/configurator is very slick.

Looked at the "how it works" -- is there a way to manually specify leaf element sizing? Thinking about dynamically sized elements that don't have markup-level specified sizes yet via bounding boxes.

Re: Show HN: Phantom UI – Skeleton that measures your real DOM (Web Component, 8kb)

#6

Post by Aejkatappaja »

fraywing wrote: post #5

Gave you a star as well. Love the idea and the demo/configurator is very slick. Looked at the "how it works" -- is there a way to manually specify leaf element sizing? Thinking about dynamically sized elements that don't have markup-level specified sizes yet via bounding boxes.

Thanks! Right now it relies entirely on getBoundingClientRect(), so if an element has no dimensions yet the block gets skipped.

For images/videos I added a load event listener that re-measures once the media loads and takes up space.

For elements that are truly dynamic with no initial size, the best workaround today is setting explicit dimensions via CSS (min-height, aspect-ratio, etc.) which is good practice for CLS anyway.

That said, something like data-shimmer-width / data-shimmer-height attributes to manually override sizing could work well for that use case.

Adding it to the backlog!

Post reply on HN