Do not collapse Update Rates button in a transient state (#619)

* Do not collapse Update Rates button in a transient state

* Address PR feedback and add animation to everything affected by IsCurrencyLoadingVisible

src/Calculator/Views/UnitConverter.xaml

@@ -260,14 +260,6 @@
             </DoubleAnimationUsingKeyFrames>
         </Storyboard>
 
-        <Storyboard x:Name="TimestampFadeInAnimation">
-            <DoubleAnimation Duration="0:0:1"
-                             From="0"
-                             Storyboard.TargetName="CurrencyTimestampTextBlock"
-                             Storyboard.TargetProperty="Opacity"
-                             To="1"/>
-        </Storyboard>
-
         <MenuFlyout x:Key="CalculationResultContextMenu">
             <MenuFlyoutItem x:Name="CopyMenuItem"
                             x:Uid="CopyMenuItem"
@@ -448,14 +440,85 @@
                     </VisualState.Setters>
                 </VisualState>
             </VisualStateGroup>
+            <VisualStateGroup x:Name="CurrencyLoadingStates">
+                <VisualStateGroup.Transitions>
+                    <VisualTransition From="CurrencyLoadingState" To="CurrencyLoadedState">
+                        <Storyboard>
+                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Units1" Storyboard.TargetProperty="Visibility">
+                                <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="Visible"/>
+                            </ObjectAnimationUsingKeyFrames>
+                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Value1Container" Storyboard.TargetProperty="Visibility">
+                                <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="Visible"/>
+                            </ObjectAnimationUsingKeyFrames>
+                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Units2" Storyboard.TargetProperty="Visibility">
+                                <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="Visible"/>
+                            </ObjectAnimationUsingKeyFrames>
+                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Value2Container" Storyboard.TargetProperty="Visibility">
+                                <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="Visible"/>
+                            </ObjectAnimationUsingKeyFrames>
+                            <DoubleAnimation Duration="0:0:1"
+                                             From="0"
+                                             Storyboard.TargetName="CurrencyRatioEqualityBlock"
+                                             Storyboard.TargetProperty="Opacity"
+                                             To="1"/>
+                            <DoubleAnimation Duration="0:0:1"
+                                             From="0"
+                                             Storyboard.TargetName="CurrencyTimestampTextBlock"
+                                             Storyboard.TargetProperty="Opacity"
+                                             To="1"/>
+                            <DoubleAnimation Duration="0:0:1"
+                                             From="0"
+                                             Storyboard.TargetName="Units1"
+                                             Storyboard.TargetProperty="Opacity"
+                                             To="1"/>
+                            <DoubleAnimation Duration="0:0:1"
+                                             From="0"
+                                             Storyboard.TargetName="Value1Container"
+                                             Storyboard.TargetProperty="Opacity"
+                                             To="1"/>
+                            <DoubleAnimation Duration="0:0:1"
+                                             From="0"
+                                             Storyboard.TargetName="Units2"
+                                             Storyboard.TargetProperty="Opacity"
+                                             To="1"/>
+                            <DoubleAnimation Duration="0:0:1"
+                                             From="0"
+                                             Storyboard.TargetName="Value2Container"
+                                             Storyboard.TargetProperty="Opacity"
+                                             To="1"/>
+                        </Storyboard>
+                    </VisualTransition>
+                </VisualStateGroup.Transitions>
+                <VisualState x:Name="CurrencyLoadingState">
+                    <VisualState.Setters>
+                        <Setter Target="CurrencyRatioEqualityBlock.Opacity" Value="0"/>
+                        <Setter Target="CurrencyTimestampTextBlock.Opacity" Value="0"/>
+                        <Setter Target="CurrencyLoadingGrid.Visibility" Value="Visible"/>
+                        <Setter Target="Units1.Visibility" Value="Collapsed"/>
+                        <Setter Target="Value1Container.Visibility" Value="Collapsed"/>
+                        <Setter Target="Units2.Visibility" Value="Collapsed"/>
+                        <Setter Target="Value2Container.Visibility" Value="Collapsed"/>
+                    </VisualState.Setters>
+                </VisualState>
+                <VisualState x:Name="CurrencyLoadedState">
+                    <VisualState.Setters>
+                        <Setter Target="CurrencyRatioEqualityBlock.Opacity" Value="1"/>
+                        <Setter Target="CurrencyTimestampTextBlock.Opacity" Value="1"/>
+                        <Setter Target="CurrencyLoadingGrid.Visibility" Value="Collapsed"/>
+                        <Setter Target="Units1.Visibility" Value="Visible"/>
+                        <Setter Target="Value1Container.Visibility" Value="Visible"/>
+                        <Setter Target="Units2.Visibility" Value="Visible"/>
+                        <Setter Target="Value2Container.Visibility" Value="Visible"/>
+                    </VisualState.Setters>
+                </VisualState>
+            </VisualStateGroup>
         </VisualStateManager.VisualStateGroups>
 
         <Grid x:Name="CurrencyLoadingGrid"
               Grid.Row="1"
               Grid.RowSpan="5"
               Grid.Column="0"
-              Grid.ColumnSpan="4"
+              Grid.ColumnSpan="4">
-              Visibility="{x:Bind Model.IsCurrencyLoadingVisible, Mode=OneWay, Converter={StaticResource BooleanToVisibilityConverter}}">
             <Grid.RowDefinitions>
                 <RowDefinition Height="10*"/>
                 <RowDefinition Height="7*"/>
@@ -475,8 +538,7 @@
               Grid.Row="1"
               Grid.Column="1"
               HorizontalAlignment="{x:Bind FlowDirectionHorizontalAlignment}"
-              Style="{ThemeResource ValueContainerStyle}"
+              Style="{ThemeResource ValueContainerStyle}">
-              Visibility="{x:Bind Model.IsCurrencyLoadingVisible, Mode=OneWay, Converter={StaticResource BooleanToVisibilityNegationConverter}}">
             <Grid.ColumnDefinitions>
                 <ColumnDefinition Width="Auto"/>
                 <ColumnDefinition Width="*"/>
@@ -520,15 +582,13 @@
                   ItemTemplate="{StaticResource UnitTemplate}"
                   ItemsSource="{Binding Units, Converter={StaticResource AlwaysSelectedConverter}}"
                   SelectedItem="{Binding Unit1, Mode=TwoWay, Converter={StaticResource ValidSelectedItemConverter}}"
-                  TabIndex="2"
+                  TabIndex="2"/>
-                  Visibility="{x:Bind Model.IsCurrencyLoadingVisible, Mode=OneWay, Converter={StaticResource BooleanToVisibilityNegationConverter}}"/>
 
         <Grid x:Name="Value2Container"
               Grid.Row="3"
               Grid.Column="1"
               HorizontalAlignment="{x:Bind FlowDirectionHorizontalAlignment}"
-              Style="{ThemeResource ValueContainerStyle}"
+              Style="{ThemeResource ValueContainerStyle}">
-              Visibility="{x:Bind Model.IsCurrencyLoadingVisible, Mode=OneWay, Converter={StaticResource BooleanToVisibilityNegationConverter}}">
             <Grid.ColumnDefinitions>
                 <ColumnDefinition Width="Auto"/>
                 <ColumnDefinition Width="*"/>
@@ -572,8 +632,7 @@
                   ItemTemplate="{StaticResource UnitTemplate}"
                   ItemsSource="{Binding Units, Converter={StaticResource AlwaysSelectedConverter}}"
                   SelectedItem="{Binding Unit2, Mode=TwoWay, Converter={StaticResource ValidSelectedItemConverter}}"
-                  TabIndex="4"
+                  TabIndex="4"/>
-                  Visibility="{x:Bind Model.IsCurrencyLoadingVisible, Mode=OneWay, Converter={StaticResource BooleanToVisibilityNegationConverter}}"/>
 
         <StackPanel x:Name="SupplementaryResultsPanelInGrid"
                     Grid.Row="5"
@@ -583,8 +642,7 @@
                     HorizontalAlignment="{x:Bind FlowDirectionHorizontalAlignment}"
                     VerticalAlignment="Top"
                     FlowDirection="{x:Bind LayoutDirection}"
-                    SizeChanged="SupplementaryResultsPanelInGrid_SizeChanged"
+                    SizeChanged="SupplementaryResultsPanelInGrid_SizeChanged">
-                    Visibility="{x:Bind Model.IsCurrencyLoadingVisible, Mode=OneWay, Converter={StaticResource BooleanToVisibilityNegationConverter}}">
             <local:SupplementaryResults x:Name="SupplementaryResults"
                                         HorizontalAlignment="Left"
                                         VerticalAlignment="Center"

src/Calculator/Views/UnitConverter.xaml.cpp

@@ -291,12 +291,17 @@ void UnitConverter::SetDefaultFocus()
 
 void UnitConverter::CurrencyRefreshButton_Click(_In_ Object ^ /*sender*/, _In_ RoutedEventArgs ^ /*e*/)
 {
-    if (Model->NetworkBehavior == NetworkAccessBehavior::OptIn)
+    // If IsCurrencyLoadingVisible is true that means CurrencyRefreshButton_Click was recently called
+    // and is still executing. In this case there is no reason to process the click.
+    if (!Model->IsCurrencyLoadingVisible)
     {
-        m_meteredConnectionOverride = true;
+        if (Model->NetworkBehavior == NetworkAccessBehavior::OptIn)
-    }
+        {
+            m_meteredConnectionOverride = true;
+        }
 
-    Model->RefreshCurrencyRatios();
+        Model->RefreshCurrencyRatios();
+    }
 }
 
 void UnitConverter::OnDataContextChanged(_In_ FrameworkElement ^ sender, _In_ DataContextChangedEventArgs ^ args)
@@ -320,15 +325,16 @@ void UnitConverter::OnIsDisplayVisibleChanged()
 {
     if (Model->IsCurrencyLoadingVisible)
     {
+        VisualStateManager::GoToState(this, L"CurrencyLoadingState", false);
         StartProgressRingWithDelay();
     }
     else
     {
         HideProgressRing();
 
-        if (m_isAnimationEnabled && Model->IsCurrencyCurrentCategory && !Model->CurrencyTimestamp->IsEmpty())
+        if (Model->IsCurrencyCurrentCategory && !Model->CurrencyTimestamp->IsEmpty())
         {
-            TimestampFadeInAnimation->Begin();
+            VisualStateManager::GoToState(this, L"CurrencyLoadedState", m_isAnimationEnabled);
         }
     }
 }