Theia loading screen plugin

#1

Hey, I wanted to create a plugin to show custom loading screen in theia instead of spinner.

I made the hello world plugin but it was very basic and I couldn’t find any detailed resource to build an actual plugin

In order to achieve my above task, I did

  1. yo @theia/plugin

The next question is whether the plugin is going to be backend or frontend.

Here I am choosing frontend (though I would appreciate some examples of when someone should chose frontend vs backend in the docs)

and finally skeleton-plugin as template.

Since I am on the initial steps, Can someone guide me if i am following correct steps or not? Also, if they can share resources which I should go through.

I have went through this one: https://theia-ide.org/docs/authoring_plugins/

#2

@irohitb I do not believe a plugin would be able to customize the loading screen, instead you should create a custom @theia extension to update the default behavior. Alternatively, you can provide your own preloadTemplate template (in your application’s package.json) in order to customize the current loading screen like so:

"theia": {
        "target": "browser",
        "frontend": {
            "config": {
                "applicationName": "Custom IDE",            
            }
        },
        "generator": {
            "config": {
                "preloadTemplate": "../preload.html" // path to custom spinner/loading screen.
            }
        }
    },
#3

@vince-fugnitto Thanks a lot for answering.

I went through theia architecture for extension but I wasn’t able to figure it out how we could do it via extension

I also tried searching the web but had no luck.

What I tried.

I cloned theia example extension repo: https://github.com/theia-ide/theia-extension-example

And in src/browser package.json

I added this

  "theia": {
    "generator": {
        "config": {
          "preloadTemplate": "<div class='more-preload'><h2> Testing theia </h2></div>"
        }
    }
},

And then when I did yarn and went to http://localhost:3000/, I was able to see loading screen instead of Testing theia

Can you please help me out?

#4

@irohitb I have an example in the following repo (started off as a yo theia-extension generation).

You can inspire yourself from the preload.html file which updates the css (to remove the previous spinner), and includes an animated svg as the actual spinner.

spinner
spinner1413×1030 148 KB