Xamarin : reserve items in a list before loading data

Question

In mobile applications when there is a product list to display, very often to wait for the data to load, the locations appear in gray, which avoids a accordion effect when loading text and images. I would like to know what is the best way to do this with this Xamarin form? if you have an example. thank you.

Answer 1

I already use a collectionView, thank you for your answers, here is more using IsBusy to determine if the webservice is being called

<CollectionView.EmptyView>
<ContentView x:DataType="viewModels:ProductListViewModel">
    <StackLayout>
        <Grid
            ColumnDefinitions="*,*"
            IsVisible="{Binding IsBusy}"
            RowDefinitions="Auto,Auto,Auto">
            <controls:EmptyProductView
                x:Name="EmptyProduct"
                Grid.Row="0"
                Grid.Column="0" />
            <controls:EmptyProductView Grid.Row="0" Grid.Column="1" />
            <controls:EmptyProductView Grid.Row="1" Grid.Column="0" />
            <controls:EmptyProductView Grid.Row="1" Grid.Column="1" />
            <controls:EmptyProductView Grid.Row="2" Grid.Column="0" />
            <controls:EmptyProductView Grid.Row="2" Grid.Column="1" />
            <controls:EmptyProductView Grid.Row="3" Grid.Column="0" />
            <controls:EmptyProductView Grid.Row="3" Grid.Column="1" />
            <controls:EmptyProductView Grid.Row="4" Grid.Column="0" />
            <controls:EmptyProductView Grid.Row="4" Grid.Column="1" />
        </Grid>
        <Label IsVisible="{Binding IsNotBusy}" Text="No data" />
    </StackLayout>
</ContentView>
</CollectionView.EmptyView>

Answer 2

If you are using ListView, then you can implement an empty list view template and render what you want there while the items are loading. Here is a good example of this feature:

https://github.com/xamcat/mobcat-library/blob/master/MobCAT.Forms/Controls/InfiniteListView.cs#L59-L63

Going forward, I'd recommend switching to CollectionView as it's a recommended control for handling lists in a Xamarin.Forms app and follow the guide posted by Jason in his comment.