menu
announcement

Spectrum is now read-only. Learn more about the decision in our official announcement.

Theia

Eclipse Theia - Cloud & Desktop IDE

Channels
Team

Custom Splash Screen

March 26, 2019 at 11:05pm

Custom Splash Screen

March 26, 2019 at 11:05pm
Hey 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 build
Maybe you can share your experience on providing custom login page? or code if it is open-sourced?

March 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.
Edited
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.
like-fill
1