feat: splashscreen #175
feat: splashscreen #175
Conversation
src/App.tsx
Outdated
| setTimeout(() => { | ||
| console.log('REPLACE ME') | ||
| window.studio.app.closeSplashscreen() | ||
| }, 1000) |
There was a problem hiding this comment.
to be replaced: example of how to close the splashscreen and show the app
src/main.ts
Outdated
| splashscreenWindow = new BrowserWindow({ | ||
| width: 500, | ||
| height: 300, | ||
| // transparent: true, |
There was a problem hiding this comment.
if we want the window transparent , will depend on the splashscreen we use
| @@ -138,13 +138,20 @@ const generator = { | |||
| }, | |||
| } as const | |||
|
|
|||
| const app = { | |||
There was a problem hiding this comment.
I've added it as app as I think it made more sense, feel free to let me know if you think otherwise 🤔
| @@ -17,6 +17,7 @@ const config: ForgeConfig = { | |||
| './resources/json_output.py', | |||
| './resources/group_snippet.js', | |||
| './resources/checks_snippet.js', | |||
| './resources/splashscreen.html', | |||
There was a problem hiding this comment.
the splashscreen is a simple html file so that we don't need to wait any kind of react loading to show it. It has to be quick and visible and simple~
|
|
|
The splash screen handles light and dark mode. However, it shows up pretty quickly since it's only waiting for the main window and the project structure to be configured. We can add an extra time out if we want it to show for a longer period. You can uncomment L158 of Screen.Recording.2024-09-23.at.1.43.18.PM.mov |
src/main.ts
Outdated
|
|
||
| splashscreenWindow.close() | ||
| mainWindow.show() | ||
| mainWindow.focus() |
There was a problem hiding this comment.
This won't work, we will need to use the splashscreen:close event to make sure we show a ready page.
So we will need to detect that the react page is loaded and then we can send the event from there to trigger the hiding of the splashscreen and the showing of the main window
Adds a splashscreen to show while the app is loading.
A new event
splashscreen:closeis created that can be sent from the frontend viawindow.studio.app.closeSplashscreen().To complete this we need the splashscreen and a way to detect from the frontend that the app is loaded so that we can close it and show the main window.