Repository navigation
Page flashes white when navigating between children of nested page-router-outlet #1731
Description
Full disclosure, I am new to the Nativescript framework so if I'm doing something very obviously wrong please be patient.
Environment
- Android: API 28, target Android 9.0 (Google Play)
- CLI: 5.1.1
- tns-android: 5.0.0
- tns-core-modules: 5.1.1
- NativeScript-Angular: 7.1.0 (recently upgrade to 7.2.1 and issue didn't change)
- Angular: 7.1.0
Describe the bug
The page flashes white when navigating between child routes of a component that is using a "page-router-outlet" both with page transitions and without them. I have a feature module (lazy loaded) with a main component that contains an action bar and a page-router-outlet, with the idea being that we can navigate to multiple children pages without affecting the action bar. The child pages essentially act like a stepper collecting data.
To Reproduce
Things to note:
- Every top level layout component has a class on it to change background to a very dark color (which makes the white flashes EXTREMELY intrusive)
- The component that contains the nested page-router-outlet is in a lazy loaded module (see below for routes)
Navigating from app entry point -> Child A: No issues, app behaves as expected.
Navigating from Child A -> Child B -> Child C with page transitions disabled: White flash happens on every page change both forward and backward
Navigating from Child A -> Child B -> Child C with page slide transition enabled: No white flashes occur going forward, however navigating backward once creates 1 white flash after the reverse slide animation. All further backward navigation will have 2 white flashes, and at some point page slide animations will break and the only thing that will happen on navigation is flashing.
Expected behavior
Page transitions happen smoothly without white flashes, both with and without animations.
Additional context
Routing within the lazy loaded module. In order to hit 'new-user', we navigate to auth/new-user, which routes through the '' path. The issue also seems to happen when giving the blank path a value such as auth/onboarding/new-user.
Outlet component html. The idea is that we track step progression here without removing the action bar on every step
Main app routing. Right now, home component links to auth/new-user which loads the auth module and accesses the first child page
EDIT
This setup apparently doesn't like navigating backwards. Once navigated to the first child component navigating backwards breaks the app.
EDIT 2
Some more context that may help. After navigating from /home -> /auth/new-user if you press the back button it returns to a white page no matter if you use .back() or .backToPreviousPage(). I'm assuming this means its routing to the blank outlet page, but I don't know why it wouldn't bring me to /home.
Also, the state of the child pages is not being preserved. So if I set a variable in Child A, navigate to Child B, then press the back button, the component variables on Child A are reset back to the original state.
Activity
brandon-sigao commentedon Feb 18, 2019
After doing some research I've determined that nested page-router-outlets do not seem to be supported. My outlet component was specifically not using router-outlet so that our slides could take advantage of the page state and the page transitions.
This is disappointing because having a static bar over top of several pages that transition is a fairly common design pattern. If we used real pages for every slide we'd be forced to let our entire action bar slide off screen on every navigation which simply doesn't work with our design. However, using router-outlet removes default navigation functions, state management, and transitions.
In the end we opted to convert over to using router-outlet. I had to make a dedicated service to managing the routing and mock the native back/forward navigation you would expect on traditional pages. State management is simulated by pulling all previous values from ngrx/store and repopulating them on the slide when you navigate to it. I still don't know how to handle transitions, or if those are even possible with router-outlet.
ADjenkov commentedon Feb 25, 2019
Hi @brandon-sigao and thank you for the detailed report about this!
Is it possible to isolate the white flashing problem in some sample app (you can also modify the one I'm sending you below to reproduce the problem).
I'm sending you a Playground ready project with the given scenario:
<page-router-outlet>in it. It also have 2 buttons that navigate different pages inside this<page-router-outlet>. These pages are also children paths of the Home module.<page-router-outlet>that navigates with slide animation. There is alsoactionBarVisibility="never"property set on the<page-router-outlet>which hides all navigated pages actionBars.https://play.nativescript.org/?template=play-ng&id=ltAq41&v=2
brandon-sigao commentedon Feb 25, 2019
@ADjenkov , Thanks for setting that up. I tried to make the playground reflect how we had it set up, and was able to somewhat recreate the issue here:
https://play.nativescript.org/?template=play-ng&id=ltAq41&v=12
It seems that when using [nsRouterLink] on the html template of child A to navigate to child B it briefly displays the background of the home component. For some reason I wasn't able to recreate the issues on the playground when using pageTransition="slideLeft", but that was a big cause of the problems on our app. Before we transitioned over to using router-outlet we were seeing multiple flashes after every press of the back button.
If I can remember anything else about our setup I'll try and update the playground. Unfortunately we had a tight deadline so we just had to find a workaround and move forward.
ADjenkov commentedon Feb 26, 2019
@brandon-sigao, you are seeing the home component background because of the Fade animation nature. Currently it fades the current component 0-1 then the new one from 0-1 and that is why the home component background is seen for short in between them. The slideLeft animation transitions direclty the current and the new component (no home component in between).
About the other flashing problem, that you currently cannot reproduce, I believe it is a bug that was fixed a minor version ago. If you reproduce it again please create an issue so we can investigate it further.
alereisan commentedon Apr 15, 2020
@followers same bug here, when transitioning with slide animations in an angular app, we have this white flashes: