How can I create a TabbedPage from data brought from a web service without blocking the user interface? - xamarin.forms

Question

I am trying to create a TabbedPage within a MasterDetailPage from data brought from a web service.
The issue with this is that I am blocking the user interface because I have to wait for the task that JSON brings to then iterate it and create the corresponding ViewModels for each ContentPage of the TabbedPage.
My code is something like:
Mi TabbePage:
<?xml version="1.0" encoding="utf-8" ?>
<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="MyProject.Views.MyTabbedPage"
ItemSource={Binding Tabs}>
<TabbedPage.ItemTemplate>
<DataTemplate>
<ContentPage Title={Binding Description}>
...
</ContentPage>
</DataTemplate>
</TabbedPage.ItemTemplate>
</TabbedPage>
My TabbedPageViewModel:
public TabbedPageViewModel()
{
var task = Task.Run(async () => { await LoadThings(); });
Task.WaitAll(task);
Tabs = new ObservableCollection<TabbedPageDetailViewModel>();
foreach (var t in Things)
{
Tabs.Add(new TabbedPageDetailViewModel(t.IdCode, t.Description));
}
}
private async Task LoadThings()
{
Things = new List<Thing>(await App.WebApiManager.GetCustomerThingsAsync(App.User.IdCustomer));
}
My TabbedPageDetailViewModel:
public TabbedPageDetailViewModel(string idCode, string description)
{
IdCode = idCode;
Description = description;
Task task1 = Task.Run(async () => await LoadTask1(idCode));
var task2 = Task.Run(async () => { await LoadTask2(idCode); });
Task.WaitAll(task1, task2);
}
private async Task LoadTask1(string idCode)
{
//await code that brings API data to load controls
}
private async Task LoadTask(string idCode)
{
// await code that brings API data to load controls
}
All this code blocks the user interface while the data is consumed from the API.
How can I implement this in a correct synchronous way which allows my interface to remain reactive?
PS: I can download my collection of Things in the login process of my app but I still get some delay when TabbedPageDetailViewModel is being instantiated.

Answer 1

How about add the activityindicator in the contentPage? For example:
<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
x:Class="App526.TabbedPage1">
<!--Pages can be added as references or inline-->
<ContentPage Title="{Binding des}" >
<ActivityIndicator IsRunning="true" x:Name="page1ActIndictor" />
</ContentPage>
<ContentPage Title="{Binding name}" >
<ActivityIndicator IsRunning="true" x:Name="page2ActIndictor" />
</ContentPage>
<ContentPage Title="{Binding age}" >
<ActivityIndicator IsRunning="true" x:Name="page3ActIndictor" />
</ContentPage>
</TabbedPage>
And in your code behind, use messagingCenter to stop the activityindicator :
public TabbedPage1()
{
InitializeComponent();
MessagingCenter.Subscribe<Object>(this, "dataLoadFinish", (sender) =>
{
page1ActIndictor.IsRunning = false;
page2ActIndictor.IsRunning = false;
page3ActIndictor.IsRunning = false;
});
}
Send the message when loading finished:
public class TabbedPageDetailViewModel
{
//...
public void loadingTask() {
//After finish loading data
MessagingCenter.Send<Object>(this, "dataLoadFinish");
}
//...
}