Landing page as an instant web app splash screen

Feature Requests
1

I love Anvil, it’s by far the best web app building experience.

But:

The most basic of apps takes 3-5 seconds to load, and in the world of ridiculously low attention spans that can be problematic.

Is there any way I can currently or in the future host a static / serverless / pre-rendered page that loads almost instantly, distracts the user, while the rest of the app loads?

Currently what I can do is host the app on Anvil, host a parent website on Firebase, then imbed the app in an iframe. My goal here is to use 1 service for all my needs.

1 Like
2

As a workaround, You can create a splash screen in your Native Libraries (Although that means using HTML). Then in your startup form, you can hide the splash screen.

Here is an example of that (Since the App is basically empty, you may not even notice the splash screen. Try enabling throttling for low-end mobile from developer tools)

And in case you need a live example, it is there on my website https://geeke.app

4 Likes
3

The startup time for an app is both loading the app and loading the data the app needs.

Loading the data the app needs does happen after the native libraries have been loaded, and this would be a perfect workaround for apps that spend some time loading data at startup.

Loading the app may also include slow imports. Do you know if native libraries are loaded before or after the native libraries are served?

1 Like
4

I am exactly sure what you mean. But I’ll try to explain what is going on here

If you examine the page source of any anvil app, you will find your code at the end of it, passed as a parameter to window.loadApp. Every python code you have written or components you have added will be there only. This is why, this is the part that will take the most time (especially if you have a large app).

Now Native Libraries happen before your anvil code is even fetched from the server. So while your main code is loading, the splash screen will be served.

In case you want to do a little test, add this code to your Native Library

<script>
function page_length(){
    console.log(document.getElementsByTagName('html')[0].innerHTML.length)
}
setInterval(page_length,100)
</script>

Now try enabling throttling for low end mobile (to make the loading slow). This interval will keep informing you of the size of your page source which slowly gets bigger.

5

I’m talking about some import big_slow_module that may happen on the server side. That’s usually the bottleneck, that’s what needs to be optimized, sometimes even with lazy imports. In this case we are not talking about a server call, so I may be worried about something that doesn’t happen at all.

Do you know if the whole app needs to be loaded on the server side, including all imports, before the server starts serving (from native libraries) the app to the client?

1 Like
6

Oh, I see now. Of course, someone from the staff will have the exact answer. But I think that is kept in a separate session because otherwise the splash screen would have taken too long to even appear (The time it currently takes is because there is a decent amount of content before the native libraries as well)

1 Like