diff --git a/src/app/sidebar/sidebar.tsx b/src/app/sidebar/sidebar.tsx
index d3d00069..20ed6a04 100644
--- a/src/app/sidebar/sidebar.tsx
+++ b/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>
diff --git a/src/model/model.ts b/src/model/model.ts
index 1328d287..d16ffba6 100644
--- a/src/model/model.ts
+++ b/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");
diff --git a/src/plugins/plugins.ts b/src/plugins/plugins.ts
index 9f6840fc..5e67a1e3 100644
--- a/src/plugins/plugins.ts
+++ b/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;