5 ms·
Show HN: Phantom UI – Skeleton that measures your real DOM (Web Component, 8kb)
- Aejkatappaja 5mo ago[dead]
- flogy 5mo agoLooks very promising, one more star from me! What looks a bit odd is the React component being kebab-case instead of typical CamelCase.
- Aejkatappaja 5mo agoThanks! That's just how custom elements work in React, you use the HTML tag name directly. React 19 has native custom element support so <phantom-ui> works as-is, no wrapper needed. Keeping it as a single HTML tag across all frameworks is the whole point.
- fraywing 5mo agoGave 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.
- Aejkatappaja 5mo agoThanks! 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!
- hahooh 5mo agothis is amazing. i will try this
- Aejkatappaja 5mo agoThanks, let me know how it goes!
- harakternik 5mo agoFeels like this should have existed from day one. Starred
- Aejkatappaja 5mo agoThanks!