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
- 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/
@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:
"applicationName": "Custom IDE",
"preloadTemplate": "../preload.html" // path to custom spinner/loading screen.
@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
I added this
"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?
@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.