Best way to preload pages?

How-to Discussions
1

Hello.

So what is the best way to pre load-pages? I know I can use WhileBusy and it’s great but if the user goes to another page they have to load THAT page.

Is there a way to load all pages at the same time at start up so the user can move to any page without having to wait for the page to be rendered?

Let´s take the following example:

<App>
    <Router ux:Name="router" />
    <Navigator DefaultTemplate="login">
        <LoginPage ux:Template="login" router="router" />
        <HomePage ux:Template="home" router="router" />
        <SettingsPage ux:Template="settings" router="router" />
        <UserProfilePage ux:Template="user" router="router" />
    </Navigator>
</App>

If the user goes to UserProfilePage the App waits a second or so to render everything in it. Same thing with HomePage and SettingsPage. This is to be expected and it’s great. But I would like to render all the pages at start up. (if it’s bad a idea please tell me).

Why do I want to do this?

I am making an app and it´s sort of like a game. So loading everything at the beginning it’s to be expected (I am loading a fair amount of images and videos). This provides a better experience in-game.

2

We’re looking at various solutions for this now. One approach I’m working on now is the ability to prepare a page (it’s being built for a different purpose, but might work here as well).

Note the new version of Navigator (the current release I believe) support non-template plages as well. Use ux:Name="login" instead. This creates the page immediately and keeps it around forever.

One of the hurdles we have is the rendering. Even if the page is created it still hasn’t been rendered once, and for some complex pages that can be an issue. We’re also looking at ways to somehow force the rendering once before (possibly as part of the prepare mechanism above).

3

Hello. Thanks for the answer. Looking forward to prepare.

So, If I use ux:Name="login" the page is created immediately but if I use ux:Template="login" it’s not?

4

Yes, the ux:Template are created on demand, whereas other children are created immediately. Be aware that only one copy of a non-template page can be used at a time – this is relevant if you are using a Parameter and wish to navigate between two pages using the same path, but different parameters.

5

I am testing with the ux:Name it works but it renders all pages on top of each other.

<App Background="#022328">
	<Router ux:Name="router" />

	<ClientPanel>
		<Navigator DefaultTemplate="splash">
			<SplashPage ux:Name="splash" router="router" />
			<HomePage ux:Name="home" router="router" />
			<EditHikePage ux:Name="editHike" router="router" />
		</Navigator>
	</ClientPanel>
</App>

Looks like this —>

Is this to be expected? It actually does what I want, but not on top of each other.

6

By default those should not render on top of each other, they should work like the ux:Template version. I’ll add an issue to investigate. I recently found some related issues, so it’s possible this has been fixed internally already, but I’ll be sure to double check.

7

Can I see your code for the pages? You don’t by chance override the Transition value on them, do you?

8

No, I did not changed the transition. However, I just tested the same example using ux:Name in Fuse 0.30 (build 8529) and everything works fine now. No need to worry :slight_smile: Btw, do you know if there’s any progress on prepare?