Change loading screen

What would be the easiest way to change the loading screen? I can see the preload element is hard-coded in the frontend generator and overriding the styles takes time to load, so the original styles can still be seen for a short while. How have others done it? Gitpod for example?

[original thread by Rob Moran]

I had the same issue you described Rob, changing the spinner outside of core means we see the hardcoded one first, then my custom spinner. I’d also like to know what the possible solution may be, like Gitpod.

As far as I know, Gitpod generates custom html file after theia build. @svenefftinge can provide more info

[Rob Moran]

Via a custom frontend-generator or by injecting html from one of the frontend modules?

no, via custom yarn build npm script that overrides a generated html file after theia build finished

If we want to have a hook for it, i imagine it should be done via webpack. There is a plugin to generate HTML file from the template. It will use a default template and a user can override it using something like: https://github.com/theia-ide/theia/issues/766#issuecomment-341720642

[Rob Moran]

@vince-fugnitto I got a replacement to work satisfactorily

[Rob Moran]

By registering a plugin with an empty container, it allows you to specify css which gets loaded first:

import '../src/index.css';
import { ContainerModule } from 'inversify';

export default new ContainerModule(bind => { });

Sorry, rob, I have been on workshop this week. In gitpod we postprocess the generated files. But I think we should have this as part of the branding.