Custom Splash Screen
March 26, 2019 at 11:05pmCustom Splash Screen
March 26, 2019 at 11:05pmHey guys, I am wondering what the best approach would be to add a custom splash screen to Theia. This would also include replacing the spinner if possible and instead showing the splash screen which does a couple of things in the background. Once those tasks are done, I want to continue with loading the frontend shell including all other widgets and contributions. After looking a bit into it, I found that I could bind
FrontendApplicationContribution and provide a class that does whatever it has to do inside configure or initialize. This defers the loading of other contributions and the editor is only shown when all contributions are basically done. This however is not a splash screen and what I am trying to do is to show a widget with some markup and once that widget has finished its tasks I want to transition to the editor.I would love to hear your thoughts.
March 27, 2019 at 4:44am
Hi Dominic! There is a contribution point for preload screen: https://github.com/theia-ide/theia/pull/4232
rewrite index.html after
theia buildMarch 27, 2019 at 4:44pm
The PR mentions allows you to modify the HTML used for the splash screen. You can override the CSS used by including a CSS file with the relevant changes in one of your plugins. This should allow you to display any splash screen you want.
I also added this PR https://github.com/theia-ide/theia/pull/4301 which introduces a configure lifecycle method
It can be used as an async method, so any plugin can block loading until they resolve the configure
We use this approach to show a login screen and defer loading of the application and menu items until login succeeds
Unfortunately our source isn't public, but you can see this in action if you install the Mbed Studio product from os.mbed.com/studio ;)
Can you maybe give me a pointer how you'd show a login screen? The login screen in your case is not the splash screen, right?
I also figured that I can use
configure to defer further loading of any other contributions. Maybe we should consider showing an error screen when one of the contributions fails, that is the promise inside configure is rejected. Or at least in our case I would like to not continue loading Theia if the promise was rejected and the contribution failed to configure. In that case I'd like to show a simple modal and a message that informs the user. Does that make sense?March 28, 2019 at 5:40am
please file an issue, so you are suggesting to improve error handling, if something goes wrong during start up, we show a screen that Theia failed to start with an error, please check logs and so on? It would be better that the black screen as for now.
Yep, I think that might be a cool feature. At least I expect Theia to not boot if one of the contributions fails if the rejection is not handled properly and it bubbles up.
For reference https://github.com/theia-ide/theia/issues/4746