ActivityIndicator freezes with binding

Question

I have a problem with activity indicator. Application is gathering data from REST server in a different thread, and binding it to carousel view. ActivityIndicator works fine, but whet I'm doing Device.BeginInvokeOnMainThread(() => BindingContext = ViewModel); ActivityIndicator freezes until binding won't finish (usually it is 2-3 seconds). Is there any way to avoid this problem?

Code:

await Task.Run(async () =>
{
    DateTime startTime = DateTime.Now;
    try
    {
        selectedLocation = App.Session.DataProvider.GetLocation(selectedLocation.IdLocation, true);
        List<OpLocationEquipment> locationEq = App.Session.DataProvider.GetLocationEquipment(new long[] { selectedLocation.IdLocation });
        Logger.Logger.Log(Logger.EventID.Views.ItemDetailsPage.SelectedLocationInfo, Logger.Logger.Params(selectedLocation.IdLocation, selectedLocation.ToString()));

        ViewModel = new LocationDetailsViewModel(selectedLocation, locationEq);
        BindingContext = ViewModel; 
    }
    catch (Exception ex)
    {
        await DisplayAlert(ResourceWrapper.GetValue(Constants.StringKey.ApplicationName), ResourceWrapper.GetValue(Constants.StringKey.UnexpectedErrorOccurredDuringConnectingToServer), ResourceWrapper.GetValue(Constants.StringKey.OK));
        Logger.Logger.Log(EventID.Views.LoginPage.Exception, ex);
    }
    TimeSpan totalTime = DateTime.Now - startTime;
    Logger.Logger.Log(EventID.Views.ItemDetailsPage.TotalTime, Logger.Logger.Params(totalTime.TotalSeconds));
});
HideActivityIndicator();

Data template:

<DataTemplate  x:Key="LocationTemplate">
    <StackLayout>
        <Grid VerticalOptions="FillAndExpand" Padding="0" Margin="0,0,0,-10">
            <Grid.RowDefinitions>
                <RowDefinition />
                <RowDefinition Height="auto" />
            </Grid.RowDefinitions>
            <RelativeLayout Grid.Row="0" HorizontalOptions="FillAndExpand">
                <ffimageloading:CachedImage Source="{Binding BackgroundImage}" Opacity="1" Aspect="Fill" RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width}" RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height}"/>
                <ScrollView RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width}" RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height}">
                    <StackLayout>
                        <StackLayout Padding="15" BackgroundColor="White">
                            <Grid>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="*" />
                                    <ColumnDefinition Width="auto"/>
                                    <ColumnDefinition Width="auto"/>
                                </Grid.ColumnDefinitions>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="1" />
                                    <RowDefinition Height="64"/>
                                </Grid.RowDefinitions>
                                <BoxView Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="3" BackgroundColor="{StaticResource CompanyColor}" HeightRequest="1" VerticalOptions="End" HorizontalOptions="FillAndExpand"/>
                                <StackLayout Grid.Column="0" Grid.Row="0" Grid.RowSpan="2">
                                    <Label TextColor="{StaticResource CompanyColor}" FontSize="12" Text="{Binding LocationAddress}" VerticalOptions="CenterAndExpand" VerticalTextAlignment="Center" />
                                </StackLayout>
                                <Grid Grid.Row="1" Grid.Column="1">
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="auto"/>
                                        <RowDefinition />
                                    </Grid.RowDefinitions>
                                    <Label Grid.Row="0" Text="Fuel status" TextColor="{StaticResource CompanyColor}" FontSize="7" HorizontalOptions="Center" HorizontalTextAlignment="Center"/>
                                    <Label Text="{Binding FuelStatus}" Grid.Row="1" TextColor="{StaticResource CompanyColor}" FontSize="28" HorizontalOptions="Center" HorizontalTextAlignment="Center" />
                                </Grid>
                                <Grid Grid.Row="1" Grid.Column="2">
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="auto"/>
                                        <RowDefinition />
                                    </Grid.RowDefinitions>
                                    <Label Grid.Row="0" Text="Device status" TextColor="{StaticResource CompanyColor}" FontSize="7" HorizontalOptions="Center" HorizontalTextAlignment="Center" />

                                    <ffimageloading:CachedImage HorizontalOptions="Center" VerticalOptions="Start" DownsampleToViewSize="true"
                                    Aspect="AspectFit" WidthRequest="32"  HeightRequest="32" Grid.Row="1" Source="{Binding DeviceStatusImage}">
                                    </ffimageloading:CachedImage>
                                </Grid>
                            </Grid>
                        </StackLayout>
                        <ListView
                                      ItemsSource="{Binding Values}"
                                      VerticalOptions="FillAndExpand"
                                      HasUnevenRows="false"
                                      BackgroundColor="Transparent"
                                      CachingStrategy="RecycleElement"
                                      HeightRequest="{Binding ListViewHeight}"
                                      Margin="10,0,10,0"
                                      SeparatorColor="White">
                            <ListView.ItemTemplate>
                                <DataTemplate>
                                    <ViewCell>
                                        <Grid Padding="15,0,15,15" Margin="0,0,0,0" HeightRequest="36">
                                            <Grid.ColumnDefinitions>
                                                <ColumnDefinition Width="auto" />
                                                <ColumnDefinition Width="5*"/>
                                            </Grid.ColumnDefinitions>
                                            <Label Text="{Binding Descr}" Style="{DynamicResource ListItemTextStyle}" Grid.Column="0" VerticalOptions="CenterAndExpand" FontSize="12"/>
                                            <Label Text="{Binding Value}" Style="{DynamicResource ListItemTextStyle}" Grid.Column="1" VerticalOptions="CenterAndExpand" FontSize="12" HorizontalTextAlignment="End" />
                                        </Grid>
                                    </ViewCell>
                                </DataTemplate>
                            </ListView.ItemTemplate>
                        </ListView>
                        <StackLayout Padding="15" BackgroundColor="White">
                            <Label x:Name="lPlotTitle" TextColor="{StaticResource Primary}" VerticalOptions="CenterAndExpand" FontSize="11"/>
                            <Grid>
                                <oxy:PlotView x:Name="plotView" Model="{Binding PlotModel}" VerticalOptions = "Fill" HorizontalOptions = "Fill" WidthRequest="{Binding PlotWidth}" HeightRequest="350"/>
                            </Grid>
                        </StackLayout>
                    </StackLayout>
                </ScrollView>
            </RelativeLayout>
        </Grid>
    </StackLayout>
</DataTemplate>

Answer 1

Setting the binding context isn’t updating any UI elements by itself, so there is no need to put it in a InvokeOnMainThread call.

If you get rid of that, the stuttering should disappear.