From 529e4f6514ecaf26e7125b51482c8046cae407a3 Mon Sep 17 00:00:00 2001
From: WithoutPants <53250216+WithoutPants@users.noreply.github.com>
Date: Tue, 18 Mar 2025 13:21:00 +1100
Subject: [PATCH] Improve UI loadable components (#5732)

* Add TagLink and PerformerCard to loadableComponents
* Add coarse grain loadable components
---
 ui/v2.5/src/docs/en/Manual/UIPluginApi.md |  2 +
 ui/v2.5/src/pluginApi.tsx                 | 60 +++++++++++++++++++++++
 2 files changed, 62 insertions(+)

diff --git a/ui/v2.5/src/docs/en/Manual/UIPluginApi.md b/ui/v2.5/src/docs/en/Manual/UIPluginApi.md
index ada9b9131..18f4405a2 100644
--- a/ui/v2.5/src/docs/en/Manual/UIPluginApi.md
+++ b/ui/v2.5/src/docs/en/Manual/UIPluginApi.md
@@ -102,6 +102,8 @@ Returns a `boolean` which will be `true` if the components are loading.
 
 This namespace contains all of the components that may need to be loaded using the `loadComponents` method. Components are added to this namespace as needed. Please make a development request if a required component is not in this namespace.
 
+This component also includes coarse-grained entries for every lazily loaded import in the stock UI. If a component is not available in `components` when the page loads, it can be loaded using the coarse-grained entry. For example, `PerformerCard` can be loaded using `loadableComponents.Performers`.
+
 ### `patch`
 
 This namespace provides methods to patch components to change their behaviour.
diff --git a/ui/v2.5/src/pluginApi.tsx b/ui/v2.5/src/pluginApi.tsx
index 88b3272e0..40c021391 100644
--- a/ui/v2.5/src/pluginApi.tsx
+++ b/ui/v2.5/src/pluginApi.tsx
@@ -85,9 +85,69 @@ export const PluginApi = {
     component: RegisterComponent,
   },
   loadableComponents: {
+    // add any lazy loaded imports here - this is coarse-grained and will load all components
+    // in the import
+    Performers: () => import("./components/Performers/Performers"),
+    FrontPage: () => import("./components/FrontPage/FrontPage"),
+    Scenes: () => import("./components/Scenes/Scenes"),
+    Settings: () => import("./components/Settings/Settings"),
+    Stats: () => import("./components/Stats"),
+    Studios: () => import("./components/Studios/Studios"),
+    Galleries: () => import("./components/Galleries/Galleries"),
+    Groups: () => import("./components/Groups/Groups"),
+    Tags: () => import("./components/Tags/Tags"),
+    Images: () => import("./components/Images/Images"),
+
+    SubmitStashBoxDraft: () => import("src/components/Dialogs/SubmitDraft"),
+    GenerateDialog: () => import("./components/Dialogs/GenerateDialog"),
+
+    ScenePlayer: () => import("src/components/ScenePlayer/ScenePlayer"),
+
+    GalleryViewer: () => import("src/components/Galleries/GalleryViewer"),
+
+    DeleteScenesDialog: () => import("./components/Scenes/DeleteScenesDialog"),
+    SceneList: () => import("./components/Scenes/SceneList"),
+    SceneMarkerList: () => import("./components/Scenes/SceneMarkerList"),
+    Scene: () => import("./components/Scenes/SceneDetails/Scene"),
+    SceneCreate: () => import("./components/Scenes/SceneDetails/SceneCreate"),
+
+    ExternalPlayerButton: () =>
+      import("./components/Scenes/SceneDetails/ExternalPlayerButton"),
+    QueueViewer: () => import("./components/Scenes/SceneDetails/QueueViewer"),
+    SceneMarkersPanel: () =>
+      import("./components/Scenes/SceneDetails/SceneMarkersPanel"),
+    SceneFileInfoPanel: () =>
+      import("./components/Scenes/SceneDetails/SceneFileInfoPanel"),
+    SceneDetailPanel: () =>
+      import("./components/Scenes/SceneDetails/SceneDetailPanel"),
+    SceneHistoryPanel: () =>
+      import("./components/Scenes/SceneDetails/SceneHistoryPanel"),
+    SceneGroupPanel: () =>
+      import("./components/Scenes/SceneDetails/SceneGroupPanel"),
+    SceneGalleriesPanel: () =>
+      import("./components/Scenes/SceneDetails/SceneGalleriesPanel"),
+    SceneVideoFilterPanel: () =>
+      import("./components/Scenes/SceneDetails/SceneVideoFilterPanel"),
+    SceneScrapeDialog: () =>
+      import("./components/Scenes/SceneDetails/SceneScrapeDialog"),
+    SceneQueryModal: () =>
+      import("./components/Scenes/SceneDetails/SceneQueryModal"),
+
+    LightboxComponent: () => import("src/hooks/Lightbox/Lightbox"),
+
+    // intentionally omitting these for now
+    // Setup: () => import("./components/Setup/Setup"),
+    // Migrate: () => import("./components/Setup/Migrate"),
+    // SceneFilenameParser: () => import("./components/SceneFilenameParser/SceneFilenameParser"),
+    // SceneDuplicateChecker: () => import("./components/SceneDuplicateChecker/SceneDuplicateChecker"),
+    // Manual: () => import("./Manual"),
+
+    // individual components here
     // add components as needed for plugins that provide pages
     SceneCard: () => import("./components/Scenes/SceneCard"),
     PerformerSelect: () => import("./components/Performers/PerformerSelect"),
+    TagLink: () => import("./components/Shared/TagLink"),
+    PerformerCard: () => import("./components/Performers/PerformerCard"),
   },
   components,
   utils: {