Debugging Router lags

I found that after switching over to using a router realized that trying to switch to my home route takes 2-4 seconds

<App Background="#333">

	<Router ux:Name="router" />
			<Navigator DefaultPath="login" >
				<Login ux:Template="login"  router="router"/>
				<Home ux:Template="home" router="router"/>
				<Registration ux:Template="registration" router="router"/>

investigating shows that the issue only happens when i try to go to the home route.

inside the home route looks like this and investigating shows that the problem lies within <HomePage ux:Name="nav1" /> of the page controller

<Page ux:Class="Home">
	<Router ux:Dependency="router" />


		<PageControl  ux:Name="pages">
			<HomePage ux:Name="nav1" />
			<Discover ux:Name="nav2" />
			<TimeLine ux:Name="nav3"/>
			<Profile ux:Name="nav4"/>

		<Indicator ux:Name="indicator" LayoutMaster="tab1" />
		<Grid Columns="1*,1*,1*,1*" Height="45" Dock="Bottom" Margin="0,0,0,4">

			<NavItem Background="#FFFFFF" ux:Name="tab1" Icon="../Assets/icons/home.png">
					<Set pages.Active="nav1" />
					<Set indicator.LayoutMaster = "tab1" />

			<NavItem Background="#FFFFFF" ux:Name="tab2" Icon="../Assets/icons/search.png"> 
					<Set pages.Active="nav2" />
						<Set indicator.LayoutMaster = "tab2" />


			<NavItem Background="#FFFFFF" ux:Name="tab3" Icon="../Assets/icons/likes.png">
					<Set pages.Active="nav3" />
					<Set indicator.LayoutMaster = "tab3" />
			<NavItem Background="#FFFFFF" ux:Name="tab4" Icon="../Assets/icons/profile.png">
					<Set pages.Active="nav4" />
					<Set indicator.LayoutMaster = "tab4" />

this is what <HomePage ux:Name="nav1" /> looks like

<Page ux:Class="HomePage" Background="#FFFFFF">


		var Observable = require("FuseJS/Observable");

        items = Observable(1,2,3,4,5);

        var CurrentPage = Observable();
        var categories = Observable();

       	var catProp = [
	       	Category: "General",
	       	PageName: "GeneralPage",
	       	Category: "Politics",
	       	PageName: "PoliticsPage",

       for (var i=0; i < catProp.length; i++){

        module.exports = {
            items : items,

		<Indicator ux:Name="indicator" />

		<DockPanel Dock="Top">
			<Grid Columns="auto,1*,auto" Height="48" Dock="Top" Margin="5">
				<Image File="../Assets/icons/hamburger-icon.png" Color="color4" Width="20" Height="20" Margin="5"/>

				<HeaderText ux:Name="titleText" Title="Rivver" />

				<Image File="../Assets/icons/hamburger-dots.png" Color="color4" Width="20" Height="20" Margin="5"/>
			<PageIndicator Navigation="navigation" Dock="Top" Height="40" Background="#FFF">
				<GridLayout ColumnCount="{ColumnCount}" />
				<Panel ux:Template="Dot">
					<Tab ux:Name="myTab" Text="{Page Title}">
							<NavigateTo Target="{Page Visual}" />
					<WhileActive Bypass="Never" Threshold="0.5">
						<Set indicator.LayoutMaster="myTab" />
						<Set myTab.Font="BrandonMedium" />
						<Set myTab.FontColor="#000" />

						<WhileInactive Bypass="Never" Threshold="0.5">
						<Set myTab.Font="BrandonRegular" />
						<Set myTab.FontColor="#CBCBCB" />


		<PageControl ux:Name="navigation" >
			<Each Items="{categories}" >
				<Page Name="{PageName}" Color="colorBackground">
					<ResourceString Key="Title" Value="{Category}" />
					<NewsFeed NewsItems="{items}"></NewsFeed>


im guessing it has something to do with all the nested page controllers