Bardzo długie renderowanie datagrida - Grupowanie danych - WPF

Witam,
jestem tutaj nowy. Od niedawna zacząłem uczyć się WPF i napotkałem pewien problem.

Mianowicie mam DataGrida, do którego chcę załadować ok 700 rekordów, które są pogrupowane w 4 - 7 kategoriach w zależności od danych w bazie.

Wszystko wygląda OK do momentu wyświetlenia danych. Pobierają się z bazy i grupują za pomocą:

   
ListCollectionView collection = new ListCollectionView(itemList);
collection.GroupDescriptions.Add(new PropertyGroupDescription("CategoryId"));
testGrid.ItemsSource = collection;

itemList - lista z obiektami do pogrupowania

cała ta operacja trwa ułamek sekundy. Przechodzi do wyświetlania, aplikacja zamarza na około 5-6 s następnie wyświetla się DataGrid z pogrupowanymi danymi.

Mój kod xaml:

 <Grid>
        <Button x:Name="start" Click="start_Click" Width="50" Height="20" VerticalAlignment="Top" HorizontalAlignment="Left" Content="START"></Button>
        
        <DataGrid x:Name="testGrid" Style="{StaticResource DataGrid_Editing_Parameters}" Margin="0,20,0,0">
            <DataGrid.Resources>
                <Style TargetType="{x:Type DataGridColumnHeader}">
                    <Setter Property="Background" Value="Gray" />
                    <Setter Property="FontWeight" Value="Bold" />
                    <Setter Property="Padding" Value="5,5,0,5" />
                </Style>
            </DataGrid.Resources>
            <DataGrid.CellStyle>
                <Style TargetType="DataGridCell">
                    <Setter Property="BorderThickness" Value="0"/>
                </Style>
            </DataGrid.CellStyle>
            <DataGrid.GroupStyle>
                <GroupStyle ContainerStyle="{StaticResource GroupHeaderrStyle}">
                    <GroupStyle.Panel>
                        <ItemsPanelTemplate>
                            <DataGridRowsPresenter></DataGridRowsPresenter>
                        </ItemsPanelTemplate>
                    </GroupStyle.Panel>
                </GroupStyle>
            </DataGrid.GroupStyle>
            <DataGrid.Columns >
                <DataGridTextColumn Header="id"  Binding="{Binding id}" Width="250" />
                <DataGridTextColumn Header="name" Binding="{Binding Name}" Width="150"/>
                <DataGridTextColumn Header="date" Binding="{Binding AddedDate}" Width="100"/>
                <DataGridTemplateColumn>
                    <DataGridTemplateColumn.CellTemplate>
                        <DataTemplate>
                            <Button x:Name="btn_PrzykladowyBTN" Content="btn">
                              
                            </Button>
                        </DataTemplate>
                    </DataGridTemplateColumn.CellTemplate>
                </DataGridTemplateColumn >
            </DataGrid.Columns>
        </DataGrid>        
    </Grid>

do tego w App.xaml

  <Application.Resources>

        <Style x:Key="GroupHeaderrStyle" TargetType="{x:Type GroupItem}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type GroupItem}">
                        <Expander x:Name="exp" IsExpanded="True" Background="White" Foreground="Black">
                            <Expander.Header>
                                <TextBlock Text="{Binding Name}"/>
                            </Expander.Header>
                            <ItemsPresenter/>
                        </Expander>
                    </ControlTemplate>
                  
                </Setter.Value>
            </Setter>
        </Style>

        <Style TargetType="DataGrid" x:Key="DataGrid_Editing_Parameters">
            <Setter Property="VerticalAlignment" Value="Stretch" ></Setter>
            <Setter Property="AutoGenerateColumns" Value="False" ></Setter>
            <Setter Property="CanUserResizeRows" Value="False" ></Setter>
            <Setter Property="CanUserSortColumns" Value="False" ></Setter>
            <Setter Property="CanUserAddRows" Value="False" ></Setter>
            <Setter Property="CanUserDeleteRows" Value="False"></Setter>
            <Setter Property="CanUserReorderColumns" Value="False"  ></Setter>
            <Setter Property="CanUserResizeColumns" Value="False" ></Setter>
            <Setter Property="SelectionMode" Value="Single" ></Setter>
            <Setter Property="SelectionUnit" Value="FullRow" ></Setter>
            <Setter Property="Margin" Value="0,0,0,0"  ></Setter>
            <Setter Property="AlternatingRowBackground" Value="Gainsboro"  ></Setter>
            <Setter Property="IsReadOnly" Value="False" ></Setter>
            <Setter Property="HeadersVisibility" Value="Column"></Setter>
            <Setter Property="VerticalContentAlignment" Value="Center" />
            <Setter Property="HorizontalContentAlignment" Value="Center" />
            <Setter Property="FontSize" Value="16" />
        </Style>
    </Application.Resources>

dodam jeszcze że próbowałem używać
VirtualizingStackPanel i VirtualizingPanel zgodnie ze znalezionymi tutorialami ale nie do końca wiem jak to działa lub czy dobrze tego używam.

Spróbuj ładować dane do DataGrid asynchronicznie.

Pobieram dane do grida asynchronicznie. W przykładowych kawałkach kodu tego nie ma bo kopiowane były z innego projektu (testowego).

Podoba mi się efekt jak na tym filmiku ale nie wiem jak go osiągnąć:

**UPDATE **
Dodałem takie właściwości do DataGrida:

EnableColumnVirtualization="True"
EnableRowVirtualization="True" 
VirtualizingPanel.IsVirtualizingWhenGrouping="True" 
VirtualizingStackPanel.IsVirtualizing="True"  
ScrollViewer.CanContentScroll="True" 
ScrollViewer.VerticalScrollBarVisibility="Visible" 
MaxHeight="700"	

Wszystko w ramach testowania, teraz grid ładuje się w ułamek sekundy, więc jest dobrze.

Pobieram dane z bazy asynchronicznie ale jak uzyskać efekt jak na filmiku który zamieściłem ?

Jak z codebehind bindować DataGrida asynchronicznie.

ObservableCollection?