async Task blocking UI

Question

I have the following scenario: In my WPF app using MVVM (I'm fairly new to MVVM) I have a Window that contains a DataGrid. When the Window is loaded I want to fill the DataGrid with entries from a Database using Entity Framework. Additionally a certain column should use a ComboBox in edit mode which is also filled from the DB (many-to-many relation). These items should also be loaded when the Window loads. Oh yes and, of course, this should be done async so that the database queries do not block the UI.

I've read these excellent blog posts by Stephen Cleary: https://t1p.de/c12y8 and https://t1p.de/xkdh .

I have chosen the approach that my ViewModel is constructed synchronously and an asynchronous Initialize method is called from the Window-Loaded event. The Initialize method then triggers the two queries.

The ViewModel:

public class ViewModel : ViewModelBase
{
        // this uses a slightly modified class from the first blog post
        private NotifyTaskCompletion databaseAction;
        public NotifyTaskCompletion DatabaseAction
        {
            get => databaseAction;
            private set
            {
                databaseAction = value;
                NotifyPropertyChanged();
            }
        }
        public ViewModel()
        {
            // nothinc asynchronous going on here
        }
        public void Initialize()
        {
            DatabaseAction = new NotifyTaskCompletion(InitializeAsync());
        }
        private async Task InitializeAsync()
        {
            List<Task> tasks = new List<Task>();
            tasks.Add(FirstQueryAsync());
            tasks.Add(SecondQueryAsync());
            await Task.WhenAll(tasks);
        }
        private async Task FirstQueryAsync()
        {
            using (var context = new SampleContext())
            {
                var query = await context.Beds.ToListAsync();
                if (query.Count > 0)
                {
                    beds = new ObservableCollection<Bed>();
                    query.ForEach(bed => beds.Add(bed));
                }
                else
                {
                    LoadBedsFromFile(ref beds);
                    foreach (var bed in beds)
                    {
                        context.Beds.Add(bed);
                    }
                    await context.SaveChangesAsync();
                }
            }
        }
        private void LoadBedsFromFile(ref ObservableCollection<Bed> list)
        {
            if (File.Exists("Beds.xml"))
            {
                FileStream fs = new FileStream("Beds.xml", FileMode.Open);
                XmlSerializer serializer = new XmlSerializer(typeof(ObservableCollection<Bed>));
                list = (ObservableCollection<Bed>)serializer.Deserialize(fs);
                fs.Close();
            }
        }
        private async Task SecondQueryAsync()
        {
            using (var context = new SampleContext())
            {
                var query = await context.Samples.Where(...)
                    .Include(...)
                    .ToListAsync();
                foreach (Sample item in query)
                {
                    // each entry is put into a ViewModel itself
                    SampleViewModel vm = new SampleViewModel(item);
                    // sampleClass.Samples is an ObservableCollection
                    sampleClass.Samples.Add(vm);
                }
            }
        }

The Window:

private async void Window_Loaded(object sender, RoutedEventArgs e)
{
            ViewModel vm = this.TryFindResource("viewModel") as ViewModel;
            if (vm != null)
                vm.Initialize();
            }
}

Now here is the Issue: The UI is unresponsive and does not update until the initialization is finished. Even if I use Task.Run(() => vm.Initialize());. The strange thing ist this: If I put a Task.Delay() into the InitializeAsync method, the loading animation ist shown as intended und the UI is responsive. If i put the Delay into SecondQueryAsync for example the UI freezes for a few seconds and afterwards the loading animation rotates for the duration of the delay. I suspect this might be some issue with creating the DbContext but i cannot pinpoint this.

@GuruStron See edit. But I do not understand why it is blocking the UI at all. Does it matter what `FirstQueryAsync` does? — djsnape, Mar 02 '22 at 17:02
Could you try replacing the `new NotifyTaskCompletion(InitializeAsync());` with `new NotifyTaskCompletion(Task.Run(() => InitializeAsync()));`, and see what happens? — Theodor Zoulias, Mar 02 '22 at 17:04
@TheodorZoulias That does the trick. Though I still wonder why... — djsnape, Mar 02 '22 at 17:13
Check out this question: [await Task.Run vs await](https://stackoverflow.com/questions/38739403/await-task-run-vs-await) — Theodor Zoulias, Mar 02 '22 at 17:52
Your code would certainly be more clear without NotifyTaskCompletion. Simply call `await vm.InitializeAsync();` in the Loaded handler. — Clemens, Mar 02 '22 at 18:20
@Clemens The UI can bind to the `NotifyTaskCompletion` object e.g. for loading indicators or `CanExecute` handlers. — djsnape, Mar 03 '22 at 10:11

score 1 · Accepted Answer · answered Mar 04 '22 at 17:51

I eventually solved this problem. TheodorZoulias' comment and the link he posted to await Task.Run vs await gave me a hint towards the solution.
Replacing the new NotifyTaskCompletion(InitializeAsync()); with new NotifyTaskCompletion(Task.Run(() => InitializeAsync())); unfortunately raised other problems because I could not simply modify the ObservableCollection from that Task's context.

I really like writing code with async-await. The problem is when it hits code that is not async. As I suspected the syncronous call to create the DbContext was blocking the thread.

So this is how I solved it - maybe it helps someone:

First I used a factory method to create the DbContext asynchronous:

public class SampleContext : DbContext
{
        private SampleContext() : base()
        {
            ...
        }

        public static async Task<SampleContext> CreateAsync()
        {
            return await Task.Run(() => { return new SampleContext(); }).ConfigureAwait(false);
        }
}

Then I rewrote the methods that query the database in a way that they do not modify the ObservableCollection themselves but returned a list instead. A second method takes the return value as a parameter and modifies the ObservableCollection. That way I can use ConfigureAwait to configure the context.

private async Task<List<Sample>> SecondQueryAsync()
{
        var context = await SampleContext.CreateAsync().ConfigureAwait(false);
        var query = await context.Samples.Where(...)
            .Include(...)
            .ToListAsync().ConfigureAwait(false);
        context.Dispose();
        return query;
}
private async Task InitializeAsync()
{
        List<Task> tasks = new List<Task>();
        var firstTask = FirstQueryAsync();
        var secondTask = SecondQueryAsync();
        tasks.Add(firstTask);
        tasks.Add(secondTask);
        await Task.WhenAll(tasks);
        if (tasks.Any(t => t.IsFaulted))
        {
            Initialized = false;
        }
        else
        {
            Initialized = true;
            FillFirstList(firstTask.Result);
            FillSecondList(secondTask.Result);
        }
}

async Task blocking UI

1 Answers1