Workshop - Improve child navigation performance

src/Artemis.UI.Shared/Routing/Routable/IRoutableHostScreen.cs

@@ -9,5 +9,6 @@ internal interface IRoutableHostScreen : IRoutableScreen
 {
     bool RecycleScreen { get; }
     IRoutableScreen? InternalScreen { get; }
+    IRoutableScreen? InternalDefaultScreen { get; }
     void InternalChangeScreen(IRoutableScreen? screen);
 }

src/Artemis.UI.Shared/Routing/Routable/RoutableHostScreenOfTScreen.cs

@@ -25,7 +25,13 @@ public abstract class RoutableHostScreen<TScreen> : RoutableScreen, IRoutableHos
         protected set => RaiseAndSetIfChanged(ref _recycleScreen, value);
     }
 
+    /// <summary>
+    ///     Gets the screen to show when no other screen is active.
+    /// </summary>
+    public virtual TScreen? DefaultScreen { get; }
+
     IRoutableScreen? IRoutableHostScreen.InternalScreen => Screen;
+    IRoutableScreen? IRoutableHostScreen.InternalDefaultScreen => DefaultScreen;
 
     void IRoutableHostScreen.InternalChangeScreen(IRoutableScreen? screen)
     {

src/Artemis.UI.Shared/Routing/Routable/RoutableHostScreenOfTScreenTParam.cs

@@ -27,7 +27,13 @@ public abstract class RoutableHostScreen<TScreen, TParam> : RoutableScreen<TPara
         protected set => RaiseAndSetIfChanged(ref _recycleScreen, value);
     }
 
+    /// <summary>
+    ///     Gets the screen to show when no other screen is active.
+    /// </summary>
+    public virtual TScreen? DefaultScreen { get; }
+
     IRoutableScreen? IRoutableHostScreen.InternalScreen => Screen;
+    IRoutableScreen? IRoutableHostScreen.InternalDefaultScreen => DefaultScreen;
 
     void IRoutableHostScreen.InternalChangeScreen(IRoutableScreen? screen)
     {

src/Artemis.UI.Shared/Routing/Router/Navigation.cs

@@ -109,12 +109,11 @@ internal class Navigation
             // Navigate the child too
             if (resolution.Child != null)
                 await NavigateResolution(resolution.Child, args, childScreen);
-            // Make sure there is no child
-            else if (childScreen.InternalScreen != null)
-                childScreen.InternalChangeScreen(null);
+            // Without a resolution, navigate to the default screen (which may be null)
+            else if (childScreen.InternalScreen != childScreen.InternalDefaultScreen)
+                childScreen.InternalChangeScreen(childScreen.InternalDefaultScreen);
         }
 
-
         Completed = true;
     }
 

src/Artemis.UI.Shared/Styles/Skeleton.axaml

@@ -8,6 +8,7 @@
             </Grid.RowDefinitions>
             <Grid Margin="20" Grid.Column="0">
                 <StackPanel>
+                    <TextBlock Theme="{StaticResource TitleTextBlockStyle}">TitleTextBlockStyle</TextBlock>
                     <TextBlock Classes="h1">This is heading 1</TextBlock>
                     <TextBlock Classes="h2">This is heading 2</TextBlock>
                     <TextBlock Classes="h3">This is heading 3</TextBlock>
@@ -22,6 +23,7 @@
             
             <Grid Margin="20" Grid.Column="1">
                 <StackPanel>
+                    <Border Width="400" Classes="skeleton-text title"></Border>
                     <Border Width="400" Classes="skeleton-text h1"></Border>
                     <Border Width="400" Classes="skeleton-text h2"></Border>
                     <Border Width="400" Classes="skeleton-text h3"></Border>
@@ -39,6 +41,7 @@
                             <Setter Property="Background" Value="#55ff0000"></Setter>
                         </Style>
                     </StackPanel.Styles>
+                    <TextBlock Theme="{StaticResource TitleTextBlockStyle}">TitleTextBlockStyle</TextBlock>
                     <TextBlock Classes="h1">This is heading 1</TextBlock>
                     <TextBlock Classes="h2">This is heading 2</TextBlock>
                     <TextBlock Classes="h3">This is heading 3</TextBlock>
@@ -51,6 +54,7 @@
             
             <Grid Margin="20" Grid.Column="0" Row="1">
                 <StackPanel Spacing="2">
+                    <Border Width="400" Classes="skeleton-text title no-margin"></Border>
                     <Border Width="400" Classes="skeleton-text h1 no-margin"></Border>
                     <Border Width="400" Classes="skeleton-text h2 no-margin"></Border>
                     <Border Width="400" Classes="skeleton-text h3 no-margin"></Border>
@@ -68,6 +72,7 @@
                             <Setter Property="Background" Value="#55ff0000"></Setter>
                         </Style>
                     </StackPanel.Styles>
+                    <TextBlock Theme="{StaticResource TitleTextBlockStyle}">TitleTextBlockStyle</TextBlock>
                     <TextBlock Classes="h1 no-margin">This is heading 1</TextBlock>
                     <TextBlock Classes="h2 no-margin">This is heading 2</TextBlock>
                     <TextBlock Classes="h3 no-margin">This is heading 3</TextBlock>
@@ -125,6 +130,11 @@
         </Style.Animations>
     </Style>
     
+    <Style Selector="Border.skeleton-text.title">
+        <Setter Property="Height" Value="28" />
+        <Setter Property="Margin" Value="0 5 0 5" />
+        <Setter Property="CornerRadius" Value="8" />
+    </Style>
     <Style Selector="Border.skeleton-text.h1">
         <Setter Property="Height" Value="65" />
         <Setter Property="Margin" Value="0 10 0 20" />