ionic-team / ionic-team/ionic-framework

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

Đang mở
#24,292 8 bình luận 2 reaction 0 người được giao Xem trên GitHub
package: core type: bug
Ngôn ngữ chính
TypeScript
Star
52.7k
Fork
13.3k
Merge trung bình
1 ngày 15 giờ
Pull request đã merge (30 ngày)
51

Mô tả

### 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_

Hướng dẫn đóng góp

Mở hướng dẫn đóng góp

Đánh giá

Issue này chưa được đánh giá.

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.