"phantom-ui takes a different approach. It renders your real component with invisible text, measures the position and size of every leaf element, and overlays animated shimmer blocks at the exact same coordinates."
"Because it is a standard Web Component, it works in React, Vue, Svelte, Angular, Solid, Qwik, or plain HTML. No framework adapters needed."
"The component needs browser APIs to measure the DOM. Import it client-side only: The <phantom-ui> tag can exist in server-rendered HTML."
phantom-ui is a Web Component that automatically generates shimmer placeholders for loading states by measuring the actual DOM at runtime. It eliminates the need for separate skeleton components, ensuring that the loading state remains in sync with the real component. By rendering the real component with invisible text, it overlays animated shimmer blocks at the same coordinates. This component works seamlessly across various frameworks without requiring adapters. It also supports server-rendered HTML, enhancing SEO while providing full type definitions for easy integration.
Read at GitHub
Unable to calculate read time
Collection
[
|
...
]