# Best practices for state toggling components inside of a template

**URL:** <https://discuss.emberjs.com/t/best-practices-for-state-toggling-components-inside-of-a-template/7752>\
**Category:** Design\
**Created:** [April 9, 2015, 1:07am UTC](https://discuss.emberjs.com/t/best-practices-for-state-toggling-components-inside-of-a-template/7752 "2015-04-09T01:07:22Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![david\_duncan](https://avatars.discourse-cdn.com/v4/letter/d/a4c791/32.png) [@david\_duncan](https://discuss.emberjs.com/u/david_duncan)\
**Post date:** [April 9, 2015, 1:07am UTC](https://discuss.emberjs.com/t/best-practices-for-state-toggling-components-inside-of-a-template/7752/1 "2015-04-09T01:07:22Z")

</div>

Curious on best practices for toggling different components within a template.

We have a working example of a list(table) and a grid(item) view.

It works great using actions and if blocks inside of the template to toggle showing a grid component, or a list component. There is a half second of render lag inbetween toggling which I feel can be optimized.

Are we attacking the problem in the correct way? Is there a more ember way to accomplish this?