Custom Splash Screen

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.

[original thread by Dominic E.]

Hi Dominic! There is a contribution point for preload screen: https://github.com/theia-ide/theia/pull/4232

rewrite index.html after theia build

@thegecko Maybe you can share your experience on providing custom login page? or code if it is open-sourced?

[Rob Moran]

@delm The PR @anton-kosyakov 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.

[Rob Moran]

I also added this PR https://github.com/theia-ide/theia/pull/4301 which introduces a configure lifecycle method

[Rob Moran]

It can be used as an async method, so any plugin can block loading until they resolve the configure

[Rob Moran]

We use this approach to show a login screen and defer loading of the application and menu items until login succeeds

[Rob Moran]

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 :wink:

[Dominic E.]

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?

@delm 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.

[Dominic E.]

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.

[Dominic E.]

For reference https://github.com/theia-ide/theia/issues/4746