Hide window until frontend is loaded | Tauri Apps | Page 1

lusty vortex Jan 30, 2023, 8:48 PM

#

Is it possible to load the main window but keep it hidden until frontend is done loading? Like keep it hidden until a command has been issued from frontend or create and show a light loading window until the main window is completely loaded in the background.

I don't know if I've added large packages to my application (like mantineJS and tailwind that hasn't been postcss:ed yet) but a slow machine can take several seconds to load, meanwhile an empty white screen is showing until frontend is completely loaded. This is worst on first load on cold start, not so much when loading the page after hot reload on backend changes or frontend reload.

young heath Jan 30, 2023, 9:00 PM

#

yeah, you can spawn the widow hidden. whatever way you spawn it there should be a config, or builder api that's called something like visible: false

and then in your frontend you can call https://tauri.app/v1/api/js/window#show whenever it's ready

lusty vortex Jan 30, 2023, 9:20 PM

#

Very nice! Thanks a lot!

#

Have you heard others experiencing the issue with slow loading of frontends?

#

I guess I should take a look at my packages, but I still feel it's too slow

young heath Jan 30, 2023, 9:21 PM

#

On windows there is/was a bug in WebView2 that slowed it down a bit. Also release builds tend to start a bit faster than debug builds.

#

other than that it was always a code issue. super slow or bloated javascript, or ipc overload (using tauri's apis to load too much data on appstart).

young heath Jan 30, 2023, 9:23 PM

#

young heath On windows there is/was a bug in WebView2 that slowed it down a bit. Also releas...

also on the release vs debug thing. most js bundlers/dev servers/whatever it was called, defer pre-compiling/transpiling packages and modules until the first load - similar to what you mentioned with postcss:ed, but it's basically a thing for all packages, just a bit different

lusty vortex Jan 30, 2023, 9:24 PM

#

Hmm, but won't it be a first load on every application start then?

#

or is it not an issue on release builds?

young heath Jan 30, 2023, 9:25 PM

#

well, in release builds your frontend is already ready to be served as-is - everything's transpiled already etc

lusty vortex Jan 30, 2023, 9:26 PM

#

ok!

#

It's still an issue for me when running release builds though

#

But I haven't configured postcss for tailwind so I guess the whole thing is loaded

#

I should probably try that first

wild sparrow Jan 30, 2023, 10:37 PM

#

Personally I wouldn't spawn the main window hidden - use a splash screen window instead. Then, use DOMContentLoaded event to invoke a rust function that closes the splashscreen and opens the main window.

#

You could then use a loader or show your logo to give the feeling to the users of something happening.

lusty vortex Jan 31, 2023, 6:37 AM

#

@wild sparrow That sounds like I would still have the problem with the white screen though? Why not load main window hidden and show a splash until DOMContentLoaded ( + a few seconds for good measure)?

wild sparrow Jan 31, 2023, 8:18 AM

#

lusty vortex <@529817321787752459> That sounds like I would still have the problem with the ...

Sure, that'll work - not sure why you would have a white screen though. I am using tailwind and don't have any white screen issues.

lusty vortex Jan 31, 2023, 8:22 AM

#

no idea really. I'll try to remove a single package at the time to see if I can figure out if any of them are especially slow/large

wild sparrow Jan 31, 2023, 8:43 AM

#

Idk what framework you are using - but Lazy load the imports that are large.

#

In React and SolidJS you can easily lazy load large imports to speed up content rendering to the DOM.

lusty vortex Jan 31, 2023, 9:19 AM

#

React with Mantine and Tailwind

wild sparrow Jan 31, 2023, 9:26 AM

#

oh yeah, you can def lazy load large components and imports

#Hide window until frontend is loaded