Slot with a placeholder is flickering when adding a new component

In general, the dropzone for the slot is relatively small / short? Are we opposed to making the dropzone taller (have more height)?

#3: are you referring to empty slots, or to already-populated slots?

I am unable to access these demo components. Is there a way to place them on the page?

#4 I am referring to the empty slots.

Sorry @wim leers I just know saw you asked me that.

Thanks for reporting... I saw this a lot but forgot to add an issue.

I've marked 🐛 Canvas flickers when adding a component to an empty slot Active as a duplicate of this issue and added the screenshot and additional detail from it to this issue's summary. I don't know if they have the same root cause. If they turn out not to and can't be easily solved at the same time, we can re-open that issue.

Nice! This definitely makes creating pages from scratch feel more polished! Few refinements we could do in a follow-up:

1. We should probably use blue color for the border instead of green because the green is supposed to be signifying global regions (i.e. change may have implications outside of the current page)
2. Root seems a bit technical. How about just calling it "Page"?
3. This is more of a UX challenge but documenting it here. The current blue background with drops doesn't make it super clear that this is the area where you're supposed to be dragging components in.

THOSE COLOR CODE AFFORDANCES! 🤩👏

Cross-posted with @lauriii's #15. I don't think people will see #15 while this is marked "fixed" 😅

The root concept is going away once there is more than one region and will be replaced with a 'content' region - I think perhaps that can be named after the region. I made it green for now as it's closest to what a region will be. Blue = component, purple = component slot and green = region. I think that's correct based on the designs.

It sounds like @jessebaker's saying in #18 that actually there is no need for a follow-up.

Let's see if @lauriii agrees.

#18: That description does not exactly match the use of the colors defined by design. Even though the root is close to a region, it doesn't cascade outside the current page. Therefore we should not be using green for the root as green is supposed to signify that changes inside that area cascade outside the current page.

Blue vs purple is supposed to signify components vs elements. We don't really have elements at this point so pretty much everything should be either purple or green.

Slots don't have their own color at the moment; they should inherit the color of their parent. In this case since we're using components, they should be purple.

Not saying we shouldn't follow up at all, just that it's a bit premature at this point as the data model is in the process of changing.

At the moment root = green, component = blue, slot = purple but with the new data model we will have a data model that represents regions, components, elements, slots and the current page/content area so all the styling and the data it is based on will be changing. I'm not sure it makes sense to have a specific issue just for changing the colours now rather than just applying the right colours once we have the right data model underpinning it all.

I think once the data model is in, it will be trivial to attribute the right colours to the right things and then we can go through with UX with working examples to iterate on.