ionic-framework icon indicating copy to clipboard operation
ionic-framework copied to clipboard

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

Open pjc2007 opened this issue 1 year ago • 2 comments
trafficstars

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

  • Run the sample application
  • Open a select
  • Slide to the next page

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,

pjc2007 avatar Aug 10 '24 03:08 pjc2007

@pjc2007 Are you able to resolve this yet?

dev-charles15531 avatar Aug 15 '24 19:08 dev-charles15531

@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.

pjc2007 avatar Aug 17 '24 02:08 pjc2007