Echo JS 0.11.0

<~>
Aejkatappaja 14 days ago. link parent 1 point ▲ ▼
The real content is the placeholder, that's the whole point.

You don't need to write separate placeholder values, phantom-ui measures the actual DOM and generates shimmer blocks from it. 
The text/images are hidden during loading, only the skeleton overlay is visible.

For UI toolkits that already ship skeleton components, yeah you'd probably stick with those. phantom-ui is more useful when you don't have that, or when you're using multiple frameworks and want one solution everywhere.

Replies

tracker1 14 days ago. link 1 point ▲ ▼
If you have the "real" content, then why would you need a skeleton?  I get that it uses the DOM values... but you'd need to have a placeholder for say "Last, First" or "123 any street" while the real data is loading, one would assume while the real data is loaded... that's the point of skeletons, generally speaking.
Aejkatappaja 14 days ago. link 1 point ▲ ▼
If user is undefined, then {user.name} renders nothing and the element has zero size. In that case you do need a fallback like {user?.name ?? "x"} so the element has dimensions to measure. 

But it's not "placeholder data" in the traditional sense, it's just ensuring the DOM element exists and has a size. The text is invisible during loading anyway.

For static layouts (headings, labels, images with width/height), it works with no fallbacks at all. The structure itself is the skeleton.
tracker1 13 days ago. link 2 points ▲ ▼
That's literally a placeholder though...  Which is fine, I was just mentioning it.
Aejkatappaja 13 days ago. link 1 point ▲ ▼
Yes it is a placeholder. 

The difference is you're writing a single "x" instead of crafting a full skeleton layout with specific widths and heights. 

But yeah, the DOM needs something to measure.