Problem between one of my binded property and my ActivityIndicator - f#

Question

I'm quite new at using F# and I'm trying to rewrite a full C# library in F#.I've have a Xamarin.forms project with a C# library containing all my Views and my goal is to have two others library, one in C# and one in F#, which each contains the same ViewModels.
All working fine except one last little thing with one of my property.
My application is simple, it just sign in a user to Facebook and then retrieve all the posts he puts on his Facebook Wall and display it using a ListView. While the retrieving work is processing, I want to Run an ActivityIndicator so the user can see that the App is working.
Here his my ActivityIndicator and my ListView in my view.xaml :
<ActivityIndicator IsVisible="{Binding IsLoading}" IsRunning="{Binding IsLoading}"
VerticalOptions="Center"
HorizontalOptions="Center"
Grid.Row="0"
Grid.Column="0"
Scale="4"
Color="#0078FF"/>
<ListView x:Name="PostsView"
ItemsSource="{Binding PostsDb}"
ItemTapped="PostsView_ItemTapped"
HasUnevenRows ="True"
BackgroundColor="LightGray"
IsPullToRefreshEnabled="True"
RefreshCommand="{Binding RefreshCommand}"
IsRefreshing="{Binding IsRefreshing}"
Grid.Row="0"
Grid.Column="0"
IsVisible="{Binding IsLoading, Converter={StaticResource ReverseBool}}">
and here is my F# class :
type FacebookViewModel(navigationService: INavigationService) =
inherit ViewModelBase()
let mutable facebookProfile = new FacebookProfileDbObject()
let mutable postsDb = new List<FacebookPostsDbObject>()
let mutable isLoading = false
member this.FacebookProfile
with get() = facebookProfile
and set(value) =
facebookProfile <- value
base.NotifyPropertyChanged(<# this.FacebookProfile #>)
member this.PostsDb
with get() = postsDb
and set(value) =
postsDb <- value
base.NotifyPropertyChanged(<# this.PostsDb #>)
member this.IsLoading
with get() = isLoading
and set(value) =
isLoading <- value
base.NotifyPropertyChanged(<# this.IsLoading #>)
member this.SetData() =
this.IsLoading <- true
this.FacebookProfile <- GetProfileData() |> Async.RunSynchronously
this.PostsDb <- GetPostData() |> Async.RunSynchronously
this.IsLoading <- false
So I execute the SetData() Function in the OnAppearing() method in my View and my FacebookProfile and PostsDb data are well Bind to my ListView and it appears correctly.
The problem is that when it's passing through SetData(), my ActivityIndicator never appeared.
However, if I delete the this.IsLoading <- false line, it appears correctly (and never disappear obviously)
In My Debug Console I've no Binding Error and even in debug mode I see that my IsLoading property is well changed.
I just want to say that I know using F# this way is not really correct and produce ugly F# code, but it's just a test to use F# class.

Answer 1

I suspect that your issue is that these 4 lines are all being executed synchronously, and thus even though you this.IsLoading <- true correctly at the beginning, the UI never receives that message because your execution is essentially locked throughout the 4 lines:
this.IsLoading <- true
this.FacebookProfile <- GetProfileData() |> Async.RunSynchronously
this.PostsDb <- GetPostData() |> Async.RunSynchronously
this.IsLoading <- false
You need to find a way to run them asynchronously by first creating an asynchronous workflow:
async {
this.IsLoading <- true
let! profileData = GetProfileData()
let! postData = GetPostData()
this.FacebookProfile <- profileData
this.PostsDb <- postData
this.IsLoading <- false
}
Then decide how you're going to handle that workflow, if your code that calls GetData() can handle tasks you can pipe it to startAsTask:
member this.SetDataAsync() =
async {
// copy code from above
}
|> Async.startAsTask