ionic-team / ionic-v3

The repo for Ionic 3.x. For the latest version of Ionic, please see https://github.com/ionic-team/ionic
Other
128 stars 85 forks source link

Ionic 2 - RC4 - Popover viewCtrl dismiss delay #151

Open ionitron-bot[bot] opened 5 years ago

ionitron-bot[bot] commented 5 years ago

Original issue by @tonyawad88 on 2016-12-19T11:50:25Z

Ionic version: (check one with "x") [x] 2.x

I'm submitting a ... (check one with "x") [x] bug report

Current behavior: The current popover behaviour seems to have a delay from when I click a button inside the popover to when the dismiss event fires back / notifies the parent controller. The delay is about 1-2seconds, which is noticeable.

Note: I haven't used Popover in previous Ionic RCs so I am not sure if this is new or it existing behaviour

Expected behavior: Reduce delay from when the popover dismissal occurs to when the parent controller receives the event.

Steps to reproduce: I tried creating a plunker but it is using RC2. There seems to be a bug in rc2 for this. But I added my code to the plunker. It's pretty basic.

http://plnkr.co/edit/NOwo7GJBVgZl6qe0CfHf?p=info

import { Component } from '@angular/core';
import { NavParams, ViewController } from 'ionic-angular';

import { UIShared} from '../../providers/ui-shared';

@Component({
  template: `
  <section class="popover-page-1">
    <button clear ion-button full color="primary" icon-left (click)="close('language');">
      <i class="fa fa-language"></i>
      Lang: EN
    </button>
    <button clear ion-button full color="green" icon-left (click)="close('settings');">
      <ion-icon name="settings"></ion-icon>
      Settings
    </button>
    <button clear ion-button full color="red" icon-left (click)="close('signout');">
      <ion-icon name="power"></ion-icon>
      Sign Out
    </button>
  </section>
  `
})
export class Popover {
    constructor(private navParams: NavParams, public viewCtrl: ViewController,
                public uiShared:UIShared) {}
    ngOnInit() {}

    close(action:string) {
        if(action == 'signout'){
            let loading = this.uiShared.GenerateLoading("Signing Out...");
            loading.present().then(()=>{
                this.viewCtrl.dismiss(action).then(()=>{loading.dismiss();});
            });
            return;
        }
        this.viewCtrl.dismiss(action); //else just return action

    }
}

Other information: N/A

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

Your system information:

Cordova CLI: 6.4.0 
Ionic Framework Version: 2.0.0-rc.4
Ionic CLI Version: 2.1.17
Ionic App Lib Version: 2.1.7
Ionic App Scripts Version: 0.0.47
ios-deploy version: 1.9.0 
ios-sim version: 5.0.8 
OS: macOS Sierra
Node Version: v6.7.0
Xcode version: Xcode 8.0 Build version 8A218a
fcarreno commented 5 years ago

not sure if exactly the same issue, but I was able to remove the delay by disabling the animation on dismiss.

this.viewCtrl.dismiss({data: 'test1'}, null, {animate: false}); // Applies to ionic 3...

mateotherock commented 5 years ago

@fcarreno any idea on how we could do that same thing from a background dismiss? As far as I know the .present only takes a callback an no other parameters. I tried popover.present({ animate: false }) but I'm still seeing the delay. Tried adding a custom transition for the 'leaveAnimation' as I've done with a modal before, but that is not allowed apparently.

fcarreno commented 5 years ago

@mateotherock not sure I follow. What do you mean 'from a background dismiss'? If you can share a bit of the sequence of events/code, that'll help...

mateotherock commented 5 years ago

@fcarreno ah sorry I just mean dismissing the popover by clicking anywhere in the background. In my app I generally like to allow this option for users to quickly back out of the popover without requiring an action within the popover. Your solution to remove the animate when manually dismissing the popover should work I imagine, but I don't think you can include something like that without the dismiss() method being called like in an onDidDismiss() or in the create(). At any rate, what I tried to do here was I found the popoverLeave method in the config of the actual popover and replaced it with a custom animation of my own where I set the animation to be much shorter. You could do this before presenting the popover or in the onWillDismiss method. That is hacky but it seems to work so far.

fcarreno commented 5 years ago

hummm. Not sure. I don't notice a delay when dismissing it by clicking on the backdrop. I only noticed it when calling dismiss() on the popover instance, so not sure what your problem could be...

Floaz commented 5 years ago

Do you have the onWillDismiss() method in ionic V3? I had the same problem in ionic V4 and used the onWillDismiss().

onDidDismiss() is called after the animation ends. onWillDismiss() is called when the dismiss() method is called.