My design is getting really big and slow, so I am looking for the most efficiënt way to create hover states on components.
I have a bunch of pretty big/complex components that represent a conveyor track in my design. They include shapes, shadows, text (sizes), icons, etc. When the user hovers over them they get a different color to indicate that they are selectable, similar to a button.
I now have a normal state, and a hover state that is exactly the same, only with a semi-transparent hover shape in a different color on top of it. I do not really like this approach, as I have to maintain both states if an icon or something changes, and it feels dump to just have the whole thing duplicated. I am also thinking my components have double the amount of shapes they really need, causing additional slow-down.
I was thinking of extracting everything in a track part component into a ‘base shape’ component and include that in both states, but I am not sure this will actually help (it's a lot of work, as all instances that have overrides need to be done again).
Any recommendation as how to do this the most efficient?
(I use my components also for interactive prototyping, so I would like the hover to work on all instances).