Optimize plugin window by droping React, adopting Svelte or Preact

[softmarshmallow]

Currently the production mode of the figma plugin is hosted on plugin window and the hosted plugin ui (Both React) But since the bootup time is critical, we can optimize this via using minimized version of framework (or even vanilla) just for hosting a plugin ui on plugin window.

I'm not sure how much booting time can be saved, but worth a try ;)

References

• skeleton view in vanilla js or here
• https://codepen.io/viktorstrate/pen/yoBRLy

Resolutions

• [x] change plugin host to vanilla html + js + css
• [ ] change PluginApp not to wait until PluginService to bootup (show ui first, don't throw when initialized without timeout)
• [ ] Optimize web for faster loading speed across network

Current

https://user-images.githubusercontent.com/16307013/131169342-ed55d4f6-28af-44dc-a467-578e4452028b.mov

[softmarshmallow]

This is what happens when using vanilla js + html for the plugin host window.

https://user-images.githubusercontent.com/16307013/131209083-2ba99fac-ba1b-4837-a886-ad5e989ac360.mov

After plugin window shows up.

• First html content 40ms
• First iframe content 300ms
• Plugin message transport to be completed after callback 1560ms
• Remote plugin ui to show up 2100ms