[V2] Loading Screen?

[KiddoV]

Just a follow up with this old #365 . As mentioned in the issue, there is a few seconds when loading the app. It would be nice if we can add a loading screen to fill that gap. The Fixed in V2 label was removed. I am not sure if we already have this feature in V2 yet? I don't see it in the documents.

Thanks,

[leaanthony]

The easiest and most configurable way of doing this is via your own code: set the window to be frameless and small, set the background image, then lazy load your main app. Once your app is ready, hide the window, resize etc, then show. The window should show once all assets in the main HTML load so the splash should show straight away. I'm not sure how we can add this as a standalone feature right now. Feels like something that would need a lot more thought.

[leaanthony]

@KiddoV Did you manage to get this working? It would make a great guide.

[KiddoV]

@leaanthony I haven't try this since there are other matters in my app that need to be fixed. Although, your guide is a little bit confused to me. I'm not sure how to make the loading screen window to be displayed before the main app, and how do you make the app lazy loading etc... If you can provide some code to make it more clear. I will try to make this work when I get back to work on Monday.

[KiddoV]

@leaanthony v2.5.0 seems like a long run here. We are not even at stable release version :). Would it be nice to have a work-around or something to try out?

[leaanthony]

Just try what i said I guess. Unfortunately, I have no bandwidth for this right now. Is 2s really that long?

[stffabi]

I can just speak for your app, which loads almost instantly with no delay. Maybe it would be interesting to find the root cause. Size of the assets, size of one specific file, possibly slow remote content? Shouldn't those scenarios be solvable almost like with any other HTML site hosted on a webserver as well? Maybe showing a progress or a splash image that is just in plain html, and as soon as the javascript has been fully loaded and initialized the image will be hidden.

[KiddoV]

To be honest, I don't know how to make it to work. Too many questions in my head:

• Should I make a new assets folder just for the loading screen?
• How do I call just the load-screen.html in the wails.Run() method (Although, it is required index.html)?
• Should I make a new instance just for the loading screen loadScreen := NewApp() in the OnStartup of the main process?
• ...etc

I'm not sure what is the right way to do it.

[stffabi]

I think the best would be first the find the cause why your assets or parts of it take so long. Try to investigate with the dev tools if there's a request that takes so long, to be loaded. Try removing content from your index.html to narrow it further down. Does the same slow loading happen on a Webserver.

[KiddoV]

@stffabi sorry if I lead you to a misunderstanding situation here. At the current state, my app's loading is just fine (< 2sec). My point here was trying to add a loading screen to the app, to see if we can add more feature to this library. Not too many library support this feature out there. This could be something that make this library stand-out, you know.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[KiddoV]

Since you added v2.5.0 label. This should be an Open issue right?

@leaanthony I am recently having some time to go back and try implement a splash screen or loading screen or whatever you call it into my app. In the past, you said lazy load your main app. How do you "lazy load" exactly? Can you spare some sample code?

[leaanthony]

I don't sorry. Can you give an example of what takes so long to load that you need a splash screen?

[KiddoV]

I think my app loading time depends on the PC specs. My gaming PC at home load faster than my work PC. In my workplace, they also have an anti-virus software that would mess with my app also, so every time I do wails dev I have to wait more, and some time it would cost me a few tries for the app to run. I think the anti-virus blocks the files, so when I re-create the app it would yell:

Build error - continuing to run current version
open ...\frontend\wailsjs\runtime\package.json: Access is denied.

or

2022/07/08 06:16:41 mkdir frontend\wailsjs\go\main: Access is denied.

or sometime

Build error - continuing to run current version
open ...\frontend\wailsjs\runtime\package.json: The system cannot find the path specified.

and

2022/07/13 06:07:27 mkdir frontend\wailsjs\go\main: Access is denied.
Error during retrieving assetdir: Get "http://localhost:34115/wails/assetdir": dial tcp [::1]:34115: connectex: No connection could be made because the target machine actively refused it.
Reloading couldn't be triggered: Please specify -assetdir or -reloaddirs

Anyway, the point is, I just trying to make a loading screen or splash screen no matter the loading time.

[leaanthony]

I think the multiple windows ticket covers this use case so closing for now 👍