Question 238768 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Loader dismiss call will turn swipper to current page

Im having a swiper and loader. Scenario its very easy .
Whenever some calculations are performed its initialized the loader and after we get the sucess result turn off the loader and swip to second slide.

 <swiper-container #slides [allowTouchMove]="false" pagination="false">
    <swiper-slide
      >Slide 1

      <ion-button (click)="changeSlide()" mode="md">Change slide 1</ion-button>
    </swiper-slide>
    <swiper-slide
      >Slide 2
      <ion-button (click)="changeSlide()" mode="md"
        >Change slide 2</ion-button
      ></swiper-slide
    >
    <swiper-slide
      >Slide 3
      <ion-button (click)="changeSlide()" mode="md"
        >Change slide 3</ion-button
      ></swiper-slide
    >
  </swiper-container>

Whenever dismised the loader the swipper is just swipping to the next page and coming back again.

 async presentLoading() {
    const loading = await this.loadingController.create({
      message: 'Loading...',
    });
    return await loading.present();
  }
  public async changeSlide(): Promise<void> {
   this.presentLoadingOverlay()
      .then((data: any) => {
        data.present();
         this.slideNext(),
          setTimeout(() => {
            data.dismiss();
          }, 3000);

        data.onDidDismiss().then(() => {
          console.log('Loading dismissed! after 3 Seconds');
        });
      })

}

Even putting this.slideNext(), after the timeout will not change nothing. The dismis call will turn back to the current page

enter image description here

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    This is solved here: https://github.com/ionic-team/ionic-framework/issues/28058

    The problem here is when ion-loading is dismissed, focus is returned to the element that presented it. In this case, the ion-button in slide 0 gets focused. Swiper has logic in https://github.com/nolimits4web/swiper/blob/1cc359e45d637c209ce97ebffb917ae8587fdcf2/src/modules/a11y/a11y.mjs#L220 to show to the slide when an element inside of it is focused. Since the button in slide 0 is being focused, this effectively cancels out or undoes your manual slideNext call.

    Both of these behaviors are intentional accessibility features. According to https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/, dialogs should return focus to the element that invoked the dialog.

    You can avoid this collision by moving the ion-button that presents the loading outside of the swiper container.


  2. 0

    Try this way:

    async changeSlide() {
  //show loader before slide change.
  await  this.presentLoading();

  // after loader is visible change slide
  this.slideNext();

  // now after slides change remove loader
  await this.stopLoading();

}

    PS: create stopLoading function to hide loader.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search