Skip to content

iOS - page freezes on page navigation with transition property #6838

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
erjdriver opened this issue Jan 27, 2019 · 6 comments
Open

iOS - page freezes on page navigation with transition property #6838

erjdriver opened this issue Jan 27, 2019 · 6 comments

Comments

@erjdriver
Copy link

erjdriver commented Jan 27, 2019

Environment
Latest 5.1 - issue on iOS platform

Plugin nativescript-ui-sidedrawer

Describe the bug
Simple test app that has an icon on the bottom left. Press it and navigate to another page. Press back and press the icon again to repeat. Page is frozen.

This is on iOS.

I've narrowed the problem down to the navigation code (file main-view-model.ts).

If the transition property is commented out - it works.

If that property is activated, then on navigating back to the main page, the whole page is frozen - subsequent clicks never occur.

To Reproduce
Make sure the transition property in main-view-model.ts is enabled.

Press the icon to navigate to new page and then navigate back.

Try to press the icon again - page should be frozen.

Expected behavior
Should be able to navigate freely.

Sample project
test3.zip

Additional context
I think this might be related to issue #6810.

This app also has a nativescript-ui-sidedrawer.

Interestingly, if I set the flat property of the ActionBar is set to false - app works - but creates other issues (e.g. #6674)


Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

@tsonevn
Copy link
Contributor

tsonevn commented Jan 28, 2019

Hi @erjdriver,
I have checked your project, however, I think that the case is different.
I found that this issue happens when we show and hide the Activity indicator while setting up the isBusy property just before the navigation. It seems that the ViewModel does not complete setting up the value for the isBusy property correctly and breaks the further navigations. We will investigate further the issue and will verify if this is a real issue or it is something related to the project configuration.

Meanwhile, you can set up a timeout of one millisecond before making the navigation, which seems to solve the problem.

setTimeout(() => {
                    
                frameModule.topmost().navigate( page_def );
            }, 1);

@tsonevn tsonevn added the bug label Jan 28, 2019
@erjdriver
Copy link
Author

erjdriver commented Jan 28, 2019

I just tested with the setTimeout() and the page freezes the second time around - as long as you have the isBusy=true before the setTimeout() and isBusy=false inside the setTimeout() - with the navigation transition enabled.

Did you have the isBusy code enabled? and the transition?

Another odd aspect of this issue is that if I set the flat property of ActionBar to false - the code works as is.

Very strange - ActionBar, nativescript-ui-sidedrawer, ActivityIndicator and transition issue.

Here's the code that freezes:

Note that I changed the animation duration from 350 to 1 - but still freezes.

            this.isBusy = true; 

            setTimeout( () =>
            {
            this.isBusy = false;
            var page_def =
            {
                moduleName: "about-page",
                animated: true,

                transition: {
                    name: "slide",
                    duration: 1,
                    curve: "easeInOut"
                }

           };
     
            frameModule.topmost().navigate( page_def );
        }, 1 );

@tsonevn
Copy link
Contributor

tsonevn commented Jan 29, 2019

HI @erjdriver,
I test the scenario with the flat set false, and it seems that this will make the navigation to work the first three times on my side. Then the navigation will still block. Can you try setting up only the navigate method in the timeout? For example:

setTimeout(() => {
        frameModule.topmost().navigate( page_def );
     }, 1);

@erjdriver
Copy link
Author

The following code does NOT work

            var page_def =
            {
                moduleName: "about-page",
                animated: true,

                transition: {
                    name: "slide",
                    duration: 1,
                    curve: "easeInOut"
                }
            };

            this.isBusy = true;

            setTimeout( () =>
            {
                this.isBusy = false; 

                frameModule.topmost().navigate( page_def );
            }, 1 );
           var page_def =
            {
                moduleName: "about-page",
                animated: true,

                transition: {
                    name: "slide",
                    duration: 1,
                    curve: "easeInOut"
                }
            };

            this.isBusy = true;

            this.isBusy = false;

            frameModule.topmost().navigate( page_def );

The following snippets DO work.

            var page_def =
            {
                moduleName: "about-page",
                animated: true,

                /*
                transition: {
                    name: "slide",
                    duration: 1,
                    curve: "easeInOut"
                }
                */
            };

            this.isBusy = true;

            this.isBusy = false;

            frameModule.topmost().navigate( page_def );
            var page_def =
            {
                moduleName: "about-page",
                animated: true,

                /*
                transition: {
                    name: "slide",
                    duration: 1,
                    curve: "easeInOut"
                }
                */
            };

            //this.isBusy = true;

            setTimeout( () =>
            {
                //this.isBusy = false;

                frameModule.topmost().navigate( page_def );
            }, 1 );
            var page_def =
            {
                moduleName: "about-page",
                animated: true,

                /*
                transition: {
                    name: "slide",
                    duration: 1,
                    curve: "easeInOut"
                }
                */
            };

            this.isBusy = true;

            setTimeout( () =>
            {
                this.isBusy = false;

                frameModule.topmost().navigate( page_def );
            }, 1 );
           var page_def =
            {
                moduleName: "about-page",
                animated: true,

                transition: {
                    name: "slide",
                    duration: 1,
                    curve: "easeInOut"
                }
            };

            //this.isBusy = true;

            setTimeout( () =>
            {
                //this.isBusy = false;

                frameModule.topmost().navigate( page_def );
            }, 1 );

But setting isBusy and resetting is something that I need - so for now - I've chosen not to set the transition - that combination works.

@MartoYankov
Copy link
Contributor

It seems the RadSideDrawer and flat ActionBar are a separate issue that cause the UI layout to break. This should be fixed with #6929.

I was able to isolate this underlying issue to the custom slide animation and a visibility binding trigger on the Page. Here is a simple playground.

https://play.nativescript.org/?template=play-tsc&id=hnisRP&v=2

@lambourn
Copy link

I experience the same in {N} 5.2 with Angular project. Interestingly, this happens only when passing custom transition via NavigationOptions to the RouterExtensions.navigate(...) function.

If I unset the custom transition (e.g. platform default is used) it works as expected.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

4 participants