Loading interferes with navigation

jensengar · August 30, 2016, 2:34am

Having some issues with loading and navigation at the same time. I have something like

onSubmit() {
	const loading = this.loadingCtrl.create();
	loading.present();

	this.itemService.save(this.item)
		.then(item => {
			this.nav.pop();
			loading.dismiss();
			this.params.data['callback'](item);

		});
}

The loading works just fine and dismisses as expected, but the nav does not go to the previous page. If I switch the loading.dismiss() and nav.pop() I get the same result. I even tried wrapping the nav.pop() in a setTimeout but that had the same result. I found that if I run onSubmit() a second time, it does go to the previous page. Now before you ask me to make sure I’m not pushing the same page on twice, let me also tell you that removing the loading logic from the onSubmit() makes everything work as expected. Am I missing something here or is this a bug?

kalinbas · August 30, 2016, 2:22pm

I have the same problem. Somehow Loading and Navigation are not independent (as I was expecting). Looking at the source code of App present() it seems that the Loading Modal is added in a similar way than other pages.

github.com

ionic-team/ionic/blob/master/src/components/app/app.ts

import { EventEmitter, Injectable, Optional } from '@angular/core';
import { DOCUMENT, Title } from '@angular/platform-browser';

import { IonicApp } from './app-root';
import * as Constants from './app-constants';
import { ClickBlock } from './click-block';
import { assert, runInDev } from '../../util/util';
import { Config } from '../../config/config';
import { DIRECTION_BACK, DIRECTION_FORWARD, NavOptions, isTabs } from '../../navigation/nav-util';
import { MenuController } from './menu-controller';
import { NavigationContainer } from '../../navigation/navigation-container';
import { NavControllerBase } from '../../navigation/nav-controller-base';
import { Platform } from '../../platform/platform';
import { ViewController } from '../../navigation/view-controller';
import { IOSTransition } from '../../transitions/transition-ios';
import { MDTransition } from '../../transitions/transition-md';
import { WPTransition } from '../../transitions/transition-wp';


/**

This file has been truncated. show original

miloslavskacel · September 8, 2016, 12:07pm

Try to navigate only after loading is dismissed:

loading.dismiss().then(() => { 
   this.nav.pop();
});

It might be related to https://github.com/driftyco/ionic/issues/7160