White screen on navigate with clear history parameter

@mayureshjadhav

From @mayureshjadhav on May 26, 2017 3:47

I am using NativeSctipt 2.5 and nativescript-angular 1.2.0 in my app.

Scenario is I am navigating from page 1 to page 2 while navigating I am clearing the history but I can see a white screen while moving from page 1 to page 2 .

What is the issue?

Copied from original issue: NativeScript/NativeScript#4269

@mayureshjadhav

@mayureshjadhav there might be multiple reasons for your issue so please post more detailed information on how to reproduce your case. As the latest version is 3.x.x we will need both the content of your package.json file and the code used to create your application - the best case would be to create a sample application that demonstrates the issue and what you have achieved so far.

@mayureshjadhav

From @mayureshjadhav on May 31, 2017 4:21

Actually, I created project from hello word template and added two more pages and when I try to navigate from one page to another by using following code

this.routerExtensions.navigate(["about"], {
                            clearHistory: true
                        });

I can see a white screen and then it moves to about (another) page.

Actually, you will not see the difference in a small application but when your app becomes complicated you will observe this issue.

@mayureshjadhav

@mayureshjadhav I was able to fully reproduce this issue using Angular application and ClearHistory set to true with some PageTransition (the default one as well). The issue is not reproducible with core NativeScript project. Marking this one as a bug - keep track of this issue for further updates.

Reproducible with both iOS and Android but only in Angular based applications.

Sample application to reproduce the issue can be found here.

Steps to reproduce:

load the app
navigate with clearHistory set to true+ page transition (use some of the provided options in the app)

Actual result: the current page is replaced with a white screen and then the navigation proceeds.

Expected result : the current page to stay during the navigation transition as in this NativeScript core application

A guess: This is caused because when clearHistory is set the Angular component tree gets destroyed in clearRefCache before the navigation begins causing views to be removed for the surface and resulting in a white page. Working on a PR to get that resolved.

Update: My approach is, to instead of directly destroying the cached items I queue them into an array and destroy any queued items within the navigatedFrom event asynchronously. This also improves navigation performance as destroying the component tree (including freeing memory) seems to be a bit expensive

fix: asynchronously destroy items evicted on clearHistory navigation (#…

@sis0k0

@sis0k0 @buuhuu sorry to drag this out again but using nativescript-angular (latest) and tns-core-modules (latest), This white screen still pops up after clearHistory.

Can you check if ngDestroy() is called before or after the navigation happened? Might be a regression with the latest changes and if so, it would probably make sense to open a new issue.

@jogboms

@jogboms I think this is a regression after the 4.2. There is a PR(#977) that might solve the issue again - can you check if it will work in your case.

@vakrilov

@vakrilov I'd make one up before the end of today and share it here.

@vakrilov

@vakrilov created a sample app here

nativescript-angular@next

Fixed #977.

+1 from t.1129772

Navigating from one page to another causes the client application to flicker with a white screen.
Note; The application is also using lazily loaded modules

This one is already resolved using nativescript-angular@next with angular@4.4.
Will be included in the official nativescript-angular@4.4.0 release.

@vakrilov

@vakrilov sorry to bump that very old issue but i am seeing this in my app using 5.4.0 inside a Vue project. Could you explain (recall) what you changed in Angular to fix it?
Might have to apply the same fix to Vue $navigateTo
Thanks

This issue still there in current version :(

@alexrainman

@alexrainman indeed still see this. But it is NOT related to angular!
The original issue need to be unlocked / reopen
And i think it might come from the iOS page implementation. I think it might come from some mix-up calls between viewWillAppear and viewDidAppear

@farfromrefug

@farfromrefug it is not just iOS, i happens in Android too.

@alexrainman

@alexrainman ok then it might be an angular issue for you.
Will open a new issue for my white screen :D

Navigation Menu

Repository navigation

White screen on navigate with clear history parameter #829

4 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

White screen on navigate with clear history parameter #829

Description

Activity

NickIliev commented on Jun 6, 2017

NickIliev commented on Jun 6, 2017

NickIliev commented on Jun 6, 2017

buuhuu commented on Jun 15, 2017

jogboms commented on Sep 6, 2017

buuhuu commented on Sep 6, 2017

vakrilov commented on Sep 6, 2017

4 remaining items

jogboms commented on Sep 7, 2017

jogboms commented on Sep 7, 2017

jogboms commented on Sep 10, 2017

NickIliev commented on Sep 13, 2017

vakrilov commented on Oct 10, 2017

farfromrefug commented on May 17, 2019

alexrainman commented on Oct 3, 2019

farfromrefug commented on Oct 4, 2019

alexrainman commented on Oct 4, 2019

farfromrefug commented on Oct 4, 2019

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions