Fix blank square plugins icon when theia starts

[DoroNahari]

Signed-off-by: Doron Nahari [email protected]

What it does

Fixes #7751

Purpose a css solution to this issue. because of the life cycle of plugins sync and load, the div of the contributed plugin is loaded before the icon class is ready causes a blank square until then.

My solution is to first create empty mask and when the plugin icon css apply it will override it.

Before: see gif in #7751
After:

How to test

1. Deploy a vscode extension that have a side pane such as gitlens.
2. See that new pane added to the left pane.
3. Refresh browser and see that for about 1 second there's no blank square and the plugin icon is loaded.

Review checklist

• as an author, I have thoroughly tested my changes and carefully followed the review guidelines

Reminder for reviewers

• as a reviewer, I agree to behave in accordance with the review guidelines

[akosyakov]

I'm not sure about empty, maybe another placeholder? What if a plugin was removed in the meantime, would be there forever invisible tab?

[DoroNahari]

If plugin was removed, it's div containing the plugin-view-container class will be removed too so shouldn't be a problem.
I didn't change the existence of the tab i just changed it's appearance until the plugin icon style is loaded.

[vince-fugnitto]

The changes work well for me 👍
The proposed behavior also aligns with vscode (they do not display a placeholder and no icon is present until the icon is properly loaded).

[amiramw]

Works for me on gitpod. Code also look fine to me.

[akosyakov]

@amiramw please merge