how to organize "card layout"?

I have a navigation panel at the top and “main area” in the middle of the page.
I need to replace whatever is in the “main area” with a new component when a navigation element is used.
I’ve tried using “replaceComponent” - this is not an acceptable solution. the repaint is too slow (I’m using a very fast machine!), I can see the bottom half of the component being wiped out before it’s completely replaced. This looks ugly.

what’s a correct way to organize this “card layout” (


You could probably try
this addon
. Also you could use
as a container of your main view. Whenever navigation event occurs - you can accordingly set the appropriate views with the following method:



I found this approach:
using TabSheet with “hideTabs()” and making only 1 tab visible at any given time. this works a LOT faster than replaceComponent().

I might also try setCompositionRoot() as suggested.