For tab content that is not yet cached, when you switch to another tab the view flashes a white background. This only happens when the destination tab is not cached in the DOM. This is visually unappealing and detracts from the overall quality of the app.
Changes proposed in this pull request:
The reason the background goes white when switching to an uncached tab is that the source (current) tab is removed from the DOM before the destination (new) tab is inserted into the DOM. This change alters the behavior of the tab directive so that the source (current) tab is not marked as cached until the new tab has been loaded into the DOM. This change moves the marking of the tab as cached out of the 'tabSelected' watcher and into a new event listener on the tab 'afterLeave'.
The high-level description is that the source tab now caches itself only on the afterLeave event. The detail is that the source tab must be sure that that a tab switch actually occurred (and not just a view change in the tabs view stack). This is done by having the source tab make sure it is not selected AND that the nav views are different (this is the tab switch detection).
In order for this to work a supporting change ensures that when the tab switch is made that the afterLeave event is always sent. Previous behavior is that the afterLeave event is only sent if, when switching tabs, the view in the tab is first view in the tabs stack. If you navigate within the tab to a child view and then switch tabs the afterLeave event was not previously sent. This PR includes this change by altering viewSwitcher compareStatePrefixes(). The previous behavior compared the longest prefix and has been changed to compare the shortest prefix. For example, if the tabs abstract view is 'tabs' then 'tabs.home' is the top view in the home tab and 'tabs.settings' is the top view in the settings tab. If I then create a new view in the settings tab named 'tabs.settings.name' then switching tabs previously compared 'tabs.home' and 'tabs.settings' and being different the afterLeave event was not sent. New behavior compares 'tabs' (home) and 'tabs' (settings) and being the same, the afterLeave event is sent.
Short description of what this resolves:
For tab content that is not yet cached, when you switch to another tab the view flashes a white background. This only happens when the destination tab is not cached in the DOM. This is visually unappealing and detracts from the overall quality of the app.
Changes proposed in this pull request:
The reason the background goes white when switching to an uncached tab is that the source (current) tab is removed from the DOM before the destination (new) tab is inserted into the DOM. This change alters the behavior of the tab directive so that the source (current) tab is not marked as cached until the new tab has been loaded into the DOM. This change moves the marking of the tab as cached out of the 'tabSelected' watcher and into a new event listener on the tab 'afterLeave'.
The high-level description is that the source tab now caches itself only on the afterLeave event. The detail is that the source tab must be sure that that a tab switch actually occurred (and not just a view change in the tabs view stack). This is done by having the source tab make sure it is not selected AND that the nav views are different (this is the tab switch detection).
In order for this to work a supporting change ensures that when the tab switch is made that the afterLeave event is always sent. Previous behavior is that the afterLeave event is only sent if, when switching tabs, the view in the tab is first view in the tabs stack. If you navigate within the tab to a child view and then switch tabs the afterLeave event was not previously sent. This PR includes this change by altering viewSwitcher compareStatePrefixes(). The previous behavior compared the longest prefix and has been changed to compare the shortest prefix. For example, if the tabs abstract view is 'tabs' then 'tabs.home' is the top view in the home tab and 'tabs.settings' is the top view in the settings tab. If I then create a new view in the settings tab named 'tabs.settings.name' then switching tabs previously compared 'tabs.home' and 'tabs.settings' and being different the afterLeave event was not sent. New behavior compares 'tabs' (home) and 'tabs' (settings) and being the same, the afterLeave event is sent.
Ionic Version: 1.x / 2.x
1.3.3
Fixes: #
Tab switch UI flash.