wpfentity-frameworkbusyindicator

WPF loading indicator when Entity Framework loads data


When loading data from database with Entity Framework takes a long time I would like to show "loading" indicator on UI (WPF). For the indicator itself, I am using WPF Loading Wait Adorner as shown in the article.

The indicator works fine but is not showing when Entity Framework loads data. In that case the indicator won't show at all on UI.

I run this:

'show Adorner (loading indicator)
LoadingAdorner.IsAdornerVisible = Not LoadingAdorner.IsAdornerVisible

'read data from database with Entity Framework
Persons = _context.persons

'hide Adorner (loading indicator) after loading data is completed
LoadingAdorner.IsAdornerVisible = Not LoadingAdorner.IsAdornerVisible

and

<ac:AdornedControl Name="LoadingAdorner">
        <ac:AdornedControl.AdornerContent>
            <local:LoadingWait></local:LoadingWait>
        </ac:AdornedControl.AdornerContent>
        <ListBox>
            ...code not shown
        </ListBox>  
</ac:AdornedControl>  

Only after the data is loaded, the indicator becomes visible. What am I missing and how to show the indicator WHILE the data is loaded?


Solution

  • Problem is that you're running your EF call in Main thread. This blocks UI from being updated until you'll receive all data from the DB.
    To fix this just add BackgroundWorker or async methods:

      var worker = new BackgroundWorker();
      worker.DoWork += (s, e) => {
           this.IsLoading = true;
           this.Persons = _context.persons;
        };        
        worker.RunWorkerCompleted += (s, e) => {
           this.IsLoading = false;
        };
    

    Important: Keep in mind cross-thread access (DoWork performed in background thread, Completed - UI thread )

    And at the end to start/trigger DoWork you will need to execute .RunWorkerAsync() on your worker.