ionic-team / ionic-team/ionic-framework
feat: improve performance when using ion-item-sliding
- Lenguaje dominante
- TypeScript
- Estrellas
- 52.7k
- Forks
- 13.3k
- Merge medio
- 1 d 15 h
- PR fusionados (30 d)
- 51
Descripción
# Feature Request
**Ionic version:**
[x] **5.x**
**Describe the Feature Request**
When rendering lists of items with complex structures including `ion-item-sliding` and `ion-item-options`, DOM rendering can be incredibly expensive. This is exacerbated on mobile devices with weaker G/CPUs and less memory where rendering performance is generally slow.
It is not currently a "supported feature" to show the contents of items dynamically when sliding begins, then hide them again when sliding ends, to keep DOM node count and initial render under control.
Additionally, this makes it difficult to create custom components that use `ion-item-sliding` and insert slotted content into `ion-item-options` elements, or even insert their own, conditionally via `ng-content` or a similar composition technique.
**There are a few problems that get in the way of this:**
1. Lack of observable or event that would notify strictly on item is open or not (boolean). This can be done using the `(ionDrag)` event, but it's a bit painful.
2. Width of `options-start/end` is calculated at initial render time. If items are added/removed conditionally from these slots using `*ngIf` or the like, the window for which the sliding item will open does not adjust its width. Therefore when the item is slid open, then elements are rendered (fade in animation to make it nice), the item will snap closed again because it does not believe there is anything to show.
3. The sliding animation is jittery on many devices (seems mostly chromium based issue) which can lead to strange gestures and things snapping closed again while dragging.
**Describe Preferred Solution**
**`ion-item-sliding` should:**
1. Publish an observable or event emitter that simply reports "am I open or not".
2. Width of items should be calculated before and after `(ionDrag)` has been started. If new elements have been added, the width should be adjusted. A `ContentObserver` comes to mind so that a fixed-width pre-rendered placeholder is not required.
**Describe Alternatives**
Basically hack this in and implement it manually, which is complex and difficult to get right due to the need to set a fixed width to a placeholder element inside the `ion-item-options` component so that once sliding starts, the item will know it has contents, set a width, and stay open/not snap closed again.
**Related Code**
```
...
```
**Additional Context**
Guía de contribución
Evaluación
Este issue todavía no se ha evaluado.