Add the Modal/Drawer loaders
- Dominant language
- JavaScript
- Stars
- 400
- Forks
- 89
- Avg merge
- 1d 20h
- Merged PRs (30d)
- 149
Description
we need to implement targeted loaders for our overlay elements. This task focuses on providing independent loading control for the application's drawers (Left and Right) and a centralized loading strategy for modals.
By centralizing the modal loading logic within the Platform.vue layout, we reduce architectural overhead and enforce the use of our primary modal container.
1. Independent Drawer Loaders
- Granular Control: The UXStore must manage two distinct loading states: leftDrawerLoading and rightDrawerLoading.
- Independent Operation: Activating the loader on the Left Drawer must not impact the visibility or interaction of the Right Drawer (and vice versa).
- Overlay Implementation: Each drawer component must be updated to listen for its specific state and render a non-blocking loader overlay over its content.
2. Centralized Modal Loader
- Platform-Level Integration: The modal loader will be implemented exclusively for the centralized modal located in Platform.vue.
- Scope Restriction: To avoid "spinner hell" and unnecessary complexity, this loader will not be implemented for secondary or "rogue" modals scattered throughout the legacy codebase.
- Unified Trigger: Any action triggering the centralized modal should be able to toggle its loading state via the UXStore.
state example:
```js
state: () => ({
loaders: {
drawers: {
left: false,
right: false
},
modal: false
}
})
```
NB:
While we are moving toward a single-source-of-truth for modals, the task of migrating existing scattered modals to the centralized Platform.vue modal is out of scope for this specific issue and will be tracked in a follow-up ticket.
Contributor guide
Assessment
This issue has not been assessed yet.