Improve UI loadable components (#5732)

* Add TagLink and PerformerCard to loadableComponents
* Add coarse grain loadable components
This commit is contained in:
WithoutPants 2025-03-18 13:21:00 +11:00 committed by GitHub
parent 6d451d52ea
commit 529e4f6514
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 62 additions and 0 deletions

View file

@ -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.

View file

@ -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: {