ionic-team / ionic-framework

A powerful cross-platform UI toolkit for building native-quality iOS, Android, and Progressive Web Apps with HTML, CSS, and JavaScript.
https://ionicframework.com
MIT License
50.92k stars 13.52k forks source link

bug: Dismissing a LoadingController will cause a swiper Slide flicks back to initial slide when swiping and using showing and then dismissing an Ionic Spinner while loading data #29762

Open pjc2007 opened 1 month ago

pjc2007 commented 1 month ago

Prerequisites

Ionic Framework Version

v8.x

Current Behavior

In the sample application when trying to find out why this was happening in my real application. The basic setup is 2 slides, each with a Angular component, each with some selects, and when swiping from one slide to the next, I show an Ionic spinner while there is a server request for the data of the component in the new slide.

However, I find that if I happen to have opened a select, or any modal popup from within one of the components, and then slide, showing and then hiding the Ionic spinner will cause the slide to go back to the page we just came from.

If I remove the spinner, it does not happen , or we we don't open any "popups" before sliding it does not happen.

The sample app is just a stock newly created Ionic/Angular application, where the main component with the slider is FolderPage. In the slideChanged handler it calls the loadData on the component we are going to, and this is where we call the presentDataLoading and dismissLoaderIfPresent which uses the Ionic LoadingController (which I use everywhere wit no issues)

So, there is some weird interaction between the above elements which is causing the slider to be "pushed" back, but I have no idea what this could be.

Expected Behavior

To be able to slide to the next slide, and not have it then return to the previous when using an LoadingController during the transition

Steps to Reproduce

Most often when we call the dismiss the slide will then flick back to the orinaly slide

Code Reproduction URL

https://github.com/pjc2007/swiper-issue2

Ionic Info

Ionic:

Ionic CLI : 7.2.0 (C:\Users\peter\AppData\Roaming\npm\node_modules\@ionic\cli) Ionic Framework : @ionic/angular 8.2.6 @angular-devkit/build-angular : 18.1.3 @angular-devkit/schematics : 18.1.3 @angular/cli : 18.1.3 @ionic/angular-toolkit : 11.0.1

Capacitor:

Capacitor CLI : 6.1.1 @capacitor/android : not installed @capacitor/core : 6.1.1 @capacitor/ios : not installed

Utility:

cordova-res : 0.15.4 native-run : 2.0.1

System:

NodeJS : v20.15.1 (C:\Program Files\nodejs\node.exe) npm : 10.7.0 OS : Windows 10

Additional Information

I did do an original post about it on SO (https://stackoverflow.com/questions/78833526/swiper-slidechange-event-sometimes-called-a-second-time-resetting-back-to-the-in), but no real feedback there.

Not sure if this is a swiper or Ionic issue,

dev-charles15531 commented 4 weeks ago

@pjc2007 Are you able to resolve this yet?

pjc2007 commented 3 weeks ago

@pjc2007 Are you able to resolve this yet?

No, I had to replace it with a custom one, i.e. a component with an ion-spinner in it and using an ngIf to show/hide. Could not get around the problem no matter what I tried. This custom component causes no issues.