dont load plugin resources at startup (delays important loads). load on demand if we open the apps screen.

src/app/sidebar/sidebar.tsx

@@ -8,6 +8,7 @@ import { boundMethod } from "autobind-decorator";
 import cn from "classnames";
 import dayjs from "dayjs";
 import type { RemoteType } from "../../types/types";
+import { If, For } from "tsx-control-statements/components";
 
 import { ReactComponent as LeftChevronIcon } from "../assets/icons/chevron_left.svg";
 import { ReactComponent as HelpIcon } from "../assets/icons/help.svg";
@@ -235,11 +236,17 @@ class MainSideBar extends React.Component<{}, {}> {
                             <SettingsIcon className="icon" />
                             Settings
                         </div>
-                        <div className="item hoverEffect unselectable" onClick={() => openLink("https://docs.getprompt.dev")}>
+                        <div
+                            className="item hoverEffect unselectable"
+                            onClick={() => openLink("https://docs.getprompt.dev")}
+                        >
                             <HelpIcon className="icon" />
                             Documentation
                         </div>
-                        <div className="item hoverEffect unselectable" onClick={() => openLink("https://discord.gg/XfvZ334gwU")}>
+                        <div
+                            className="item hoverEffect unselectable"
+                            onClick={() => openLink("https://discord.gg/XfvZ334gwU")}
+                        >
                             <DiscordIcon className="icon discord" />
                             Discord
                         </div>

src/model/model.ts

@@ -2455,6 +2455,7 @@ class PluginsModel {
     selectedPlugin: OV<RendererPluginType> = mobx.observable.box(null, { name: "selectedPlugin" });
 
     showPluginsView(): void {
+        PluginModel.loadAllPluginResources();
         mobx.action(() => {
             this.reset();
             GlobalModel.activeMainView.set("plugins");

src/plugins/plugins.ts

@@ -82,6 +82,7 @@ const PluginConfigs: RendererPluginType[] = [
 ];
 
 class PluginModelClass {
+    resourcesLoaded: boolean = false;
     rendererPlugins: RendererPluginType[] = [];
 
     constructor(pluginConfigs: RendererPluginType[]) {
@@ -97,11 +98,21 @@ class PluginModelClass {
                 throw new Error(sprintf("plugin with name %s already registered", plugin.name));
             }
             this.rendererPlugins.push(plugin);
-            this.loadPluginResources(plugin);
+            // this.loadPluginResources(plugin);
             return plugin;
         });
     }
 
+    loadAllPluginResources() {
+        if (this.resourcesLoaded) {
+            return;
+        }
+        this.resourcesLoaded = true;
+        for (let plugin of this.rendererPlugins) {
+            this.loadPluginResources(plugin);
+        }
+    }
+
     // attach all screenshots. webpack doesnt allow dynamic paths, hence, we have to put static paths for each plugin
     attachScreenshots(plugin) {
         let screenshotsContext;