<TelerikDrawer Data="@NavigablePages" Expanded="true" MiniMode="true" Mode="@DrawerMode.Push">
    <DrawerContent>
        <TelerikGridLayout>
            <GridLayoutItems>
                <GridLayoutItem Column="1">
                    <TelerikCard Width="300px" Height="400px">
                        <CardHeader>
                            <CardTitle>CARD 1</CardTitle>
                        </CardHeader>
                        <CardBody>
                            @if (IsLoading)
                            {
                                <span style="height:100%">...loading...</span>
                            }
                            else
                            {
                                <TelerikChart Transitions=@false>
                                    <ChartSeriesItems>
                                        <ChartSeries Type="ChartSeriesType.Donut" Data="@donutData"
                                                        Field="@nameof(MyDonutChartModel.SegmentValue)" CategoryField="@nameof(MyDonutChartModel.SegmentName)">
                                            <ChartSeriesTooltip Visible="@IsChartTooltipVisible" Background="#222731" Color="#FFFFFF">
                                                <Template>
                                                    @((context.DataItem as MyDonutChartModel)?.Tooltip)
                                                </Template>
                                            </ChartSeriesTooltip>
                                        </ChartSeries>
                                    </ChartSeriesItems>
                                </TelerikChart>
                            }
                        </CardBody>
                    </TelerikCard>
                </GridLayoutItem>
                <GridLayoutItem Column="2">
                    <TelerikCard Width="300px" Height="400px">
                        <CardHeader>
                            <CardTitle>CARD 2</CardTitle>
                        </CardHeader>
                        <CardBody>
                            <TelerikButton OnClick="@OnClickHandler">REFRESH CHART</TelerikButton>
                        </CardBody>
                    </TelerikCard>
                </GridLayoutItem>
            </GridLayoutItems>
        </TelerikGridLayout>
    </DrawerContent>
</TelerikDrawer>


@code{

    public bool IsLoading { get; set; } = false;
    public bool IsChartTooltipVisible { get; set; } = true;

    private async Task OnClickHandler()
    {
        IsLoading = true;
        IsChartTooltipVisible = false;
        // Simulate API call
        await Task.Delay(2000);
        IsLoading = false;
        // Force the Chart to render
        StateHasChanged();
        // Delay the Chart Tooltip initialization
        await Task.Delay(100);
        IsChartTooltipVisible = true;
    }

    List<DrawerItem> NavigablePages { get; set; } = new List<DrawerItem>
{
        new DrawerItem { Text = "Home", Icon = SvgIcon.Home }
    };

    public class DrawerItem
    {
        public string Text { get; set; }
        public ISvgIcon Icon { get; set; }
    }

    public class MyDonutChartModel
    {
        public string SegmentName { get; set; }
        public double SegmentValue { get; set; }
        public string Tooltip { get; set; }
    }

    public List<MyDonutChartModel> donutData = new List<MyDonutChartModel>
    {
        new MyDonutChartModel
        {
            SegmentName = "Product 1",
            SegmentValue = 2,
            Tooltip = "Tooltip 1"
        },
        new MyDonutChartModel
        {
            SegmentName = "Product 2",
            SegmentValue = 3,
            Tooltip = "Tooltip 2"
        },
        new MyDonutChartModel
        {
            SegmentName = "Product 3",
            SegmentValue = 4,
            Tooltip = "Tooltip 3"
        }
    };
}