We’re trying to have different variants on a Card component, but when swapping between the variants in code, the icon flickers. Any advice?
Possibly could be you have a base variant without an icon.
@shrill_penguin would you mind sharing a link to your project and also the snippet you are using in your code showing how you switch between the variants?
At first glance, this might be due to remounting the image or updating the source of the image, causing a reload. (I believe it is an image instead of an icon because it’s not monochromatic)
Yep, in Plasmic it’s an image and not an icon. For context, the icon is rendered based on the product variant & button click swaps a second addToCart variant which adds the outline & button change.
Project link: https://studio.plasmic.app/projects/6ahLrnafiKmBQ1xf6hqvCn
I’ve simplified the code down to just toggling local state (f function just toggles isSelected which is in a useState)
const componentProps = {
product: plasmicDatasetName,
addedToCart: isSelected,
addToCart: {
onClick: f,
},
};
return (
<React.Fragment key={datasetId}>
<Spacer height="24px" />
<PlasmicComponent
component="Product Card"
componentProps={componentProps}
/>
</React.Fragment>
);
I was also thinking that it might be because the src was changing, but it’s the same, always this URL
https://site-assets.plasmic.app/632ca7b346d8e3a9c1bf071a63cab663.svg
We switched it over to an icon and aren’t running into issues anymore
Oh interesting - if you still have a copy of the original version that exhibits this issue (or can dig it up from history) I’d be curious to take a look, but no worries if not
To reproduce the issue you can try toggling between these two icons in a live component. It doesn’t happen in the api explorer it only happens in a real environment.
I believe that it’s due to how Plasmic handles unflattened svg files.
To fix, I had to flatten the svg files.
