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" />
<ClientPanel>
<Navigator DefaultPath="login" >
<Login ux:Template="login" router="router"/>
<Home ux:Template="home" router="router"/>
<Registration ux:Template="registration" router="router"/>
</Navigator>
</ClientPanel>
</App>
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" />
<DockPanel>
<PageControl ux:Name="pages">
<HomePage ux:Name="nav1" />
<Discover ux:Name="nav2" />
<TimeLine ux:Name="nav3"/>
<Profile ux:Name="nav4"/>
</PageControl>
<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">
<Clicked>
<Set pages.Active="nav1" />
<Set indicator.LayoutMaster = "tab1" />
</Clicked>
</NavItem>
<NavItem Background="#FFFFFF" ux:Name="tab2" Icon="../Assets/icons/search.png">
<Clicked>
<Set pages.Active="nav2" />
<Set indicator.LayoutMaster = "tab2" />
</Clicked>
</NavItem>
<NavItem Background="#FFFFFF" ux:Name="tab3" Icon="../Assets/icons/likes.png">
<Clicked>
<Set pages.Active="nav3" />
<Set indicator.LayoutMaster = "tab3" />
</Clicked>
</NavItem>
<NavItem Background="#FFFFFF" ux:Name="tab4" Icon="../Assets/icons/profile.png">
<Clicked>
<Set pages.Active="nav4" />
<Set indicator.LayoutMaster = "tab4" />
</Clicked>
</NavItem>
</Grid>
</DockPanel>
</Page>
this is what <HomePage ux:Name="nav1" />
looks like
<Page ux:Class="HomePage" Background="#FFFFFF">
<JavaScript>
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++){
categories.add(catProp[i]);
}
module.exports = {
items : items,
categories:categories,
ColumnCount:catProp.length,
CurrentPage:CurrentPage,
};
</JavaScript>
<Indicator ux:Name="indicator" />
<DockPanel>
<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"/>
</Grid>
<PageIndicator Navigation="navigation" Dock="Top" Height="40" Background="#FFF">
<GridLayout ColumnCount="{ColumnCount}" />
<Panel ux:Template="Dot">
<Tab ux:Name="myTab" Text="{Page Title}">
<Clicked>
<NavigateTo Target="{Page Visual}" />
</Clicked>
</Tab>
<WhileActive Bypass="Never" Threshold="0.5">
<Set indicator.LayoutMaster="myTab" />
<Set myTab.Font="BrandonMedium" />
<Set myTab.FontColor="#000" />
</WhileActive>
<WhileInactive Bypass="Never" Threshold="0.5">
<Set myTab.Font="BrandonRegular" />
<Set myTab.FontColor="#CBCBCB" />
</WhileInactive>
</Panel>
</PageIndicator>
</DockPanel>
<PageControl ux:Name="navigation" >
<Each Items="{categories}" >
<Page Name="{PageName}" Color="colorBackground">
<ResourceString Key="Title" Value="{Category}" />
<NewsFeed NewsItems="{items}"></NewsFeed>
</Page>
</Each>
</PageControl>
</DockPanel>
</Page>
im guessing it has something to do with all the nested page controllers