Let’s say I’ve got two components: Component A and Component B. A renders B inside its markup.
When creating a variable on Component B, you can give it a default value as well as a preview value. The preview value only affects it while viewing B directly, while the default value is used when viewing Component A.
Component B uses a skeleton and binds its visibility to a variable. The variable has a default value of “false” and a preview value of “true:”
- Viewing Component B → Skeleton is visible
- Viewing Component A → Skeleton is not visible
This works great inside Studio, where you want to see the skeleton while you’re working on it, but you don’t want it to cover up content on the pages where it’s used. But once you bring the designs into your codebase, it makes more sense for the default value to be “true,” so it’ll cover up the page content until it’s loaded. But because there is only one preview value, you have to choose between this situation:
- Viewing Component B → Skeleton is visible
- Viewing Component A → Skeleton is not visible
- On initial load → Skeleton is not visible
Or this situation:
- Viewing Component B → Skeleton is visible
- Viewing Component A → Skeleton is visible
- On initial load → Skeleton is visible
I try to get around this in codegen, but it gets messy quickly once things get more complicated. (i.e. Component A needs to pass a new value to override the current one; if Component B passes a new value, but Component A doesn’t, it may not work when rendered through Component A; if you pass new values to only A, then unit tests for B don’t work; etc.)
It would be really nice if there was another preview value on variables. One would determine the preview state in the current component, and one would determine the preview state everywhere else. That way, you can always see your designs in a specific state, without affecting the runtime default values.