ionic-team / ionic-team/ionic-framework

bug: ion-loading doesn't wait for page transition to finish before dismissing

Abierto
#24,292 8 comentarios 2 reacciones 0 asignados Ver en GitHub
package: core type: bug
Lenguaje dominante
TypeScript
Estrellas
52.7k
Forks
13.3k
Merge medio
1 d 15 h
PR fusionados (30 d)
51

Descripción

### Prerequisites

- [X] I have read the [Contributing Guidelines](https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#creating-an-issue).
- [X] I agree to follow the [Code of Conduct](https://ionicframework.com/code-of-conduct).
- [X] I have searched for [existing issues](https://github.com/ionic-team/ionic-framework/issues) that already include this feature request, without success.

### Describe the Feature Request

I would like some guidance on how to incorporate [React Suspense](https://reactjs.org/docs/concurrent-mode-suspense.html) into an Ionic React project.

### Describe the Use Case

When using [React Suspense](https://reactjs.org/docs/concurrent-mode-suspense.html) to suspend the loading of the contents of a page, I run into an issue where the page's transition breaks since there is no `IonContent` in the mounted page. Once the suspense resolves and the `IonContent` is mounted, the animation then works correctly. This is not an issue for pages that do not have a footer, since the entire suspense wrapper could be wrapped with an `IonContent` as below:

```

}>
{RandomComponent ? : }

```

The issue then arises when you have a page that has an `IonFooter` since this sits outside the `IonContent` wrapper so you cannot wrap the suspended component in an `IonContent`.

To demonstrate this problem in more detail please check out this demonstration:
https://codesandbox.io/s/nostalgic-platform-qfwqv

### Describe Preferred Solution

Preferably, there would be a component which is able to wrap the `IonContent` and `IonFooter` so that the entire page content can be suspended and lazy-loaded such as the solution below:

Page.tsx
```
const PageContent = React.lazy(() => (import('./PageContent')))

function Page {
return (


...


}>
{ }


)
}
```

PageContent.tsx
```
<>

...


...

```

I am open to any other alternatives you have to solve this issue.

### Describe Alternatives

_No response_

### Related Code

_No response_

### Additional Information

_No response_

Guía de contribución

Abrir la guía de contribución

Evaluación

Este issue todavía no se ha evaluado.

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.