SfSpinner for parent component not working

[ashimaz]

When SfSpinner is placed in parent and child components are placed inside parent SfSpinner div, the parent component SfSpinner not working and triggering child component SfSpinner.

Parent

<SfDialog Width="250px">
    <DialogTemplates>
        <Content>
            <div>
                <SfButton @onclick="@ClickHandler">Show/Hide SpinnerSfButton>
 
                <div id="container">
                    <TestComponent1 />
                    <TestComponent2 />
                div>
 
                <SfSpinner @ref="SpinnerObj" Target="#container" Label="Parent">
                SfSpinner>
            div>
 
        Content>
    DialogTemplates>
SfDialog>
 
@code{
    SfSpinner SpinnerObj;
    private string Target { get; set; } = "#container";
    private async Task ClickHandler()
    {
        SpinnerObj.ShowSpinner(Target);
        await Task.Delay(2000);
        SpinnerObj.HideSpinner(Target);
    }
}

Child1

<div>
    <SfButton @onclick="@ClickHandler">Show/Hide SpinnerSfButton>
 
    <div id="container1">div>
 
    <SfSpinner @ref="SpinnerObj" Target="#container1" Label="TestComponent1">
    SfSpinner>
div>
 
@code{
    SfSpinner SpinnerObj;
 
    private string Target { get; set; } = "#container1";
 
    private async Task ClickHandler()
    {
        SpinnerObj.ShowSpinner(Target);
        await Task.Delay(2000);
        SpinnerObj.HideSpinner(Target);
    }
}

Child2

<div>
    <SfButton @onclick="@ClickHandler">Show/Hide SpinnerSfButton>
 
    <div id="container2">div>
 
    <SfSpinner @ref="SpinnerObj" Target="#container2" Label="TestComponent2">
    SfSpinner>
div>
 
@code{
    SfSpinner SpinnerObj;
 
    private string Target { get; set; } = "#container2";
 
    private async Task ClickHandler()
    {
        SpinnerObj.ShowSpinner(Target);
        await Task.Delay(2000);
        SpinnerObj.HideSpinner(Target);
    }
}

[Indrajith Srinivasan]

Hi Ashimaz, 

 

Greetings from Syncfusion support, 

 

We have validated your reported query and able to reproduce the reported issue. We have already considered the reported issue as an bug internally with multiple spinners rendered in a page, which will be included in our Volume 3 main release. In order to resolve, the reported issue maintain a sperate target <div> for the parent spinner. We have also prepared a sample that tries to meet your requirements. 

 

Sample: https://www.syncfusion.com/downloads/support/forum/157419/ze/SfSpinner_with_child891092078 

 

Regards, 

Indrajith 

[ashimaz]

Hi, with provided solution child component spinner is not working, I will wait for Vol3, thanks.

[Indrajith Srinivasan]

Hi Ashimaz,

We will let you know once the fix is included.

Regards,
Indrajith

[Indrajith Srinivasan]

Hi Ashimaz, 

 

Thanks for your patience, 

 

We have improved the performance of the SfSpinner with our Volume 3 main release version 18.3.35. We would like you to review the breaking changes and the release notes regarding the changes we have included in this release from the below location before you upgrade. 

Release Notes: https://blazor.syncfusion.com/documentation/release-notes/18.3.35/?type=all#spinner  

 

Can you please upgrade your package to this version and let us know if you are facing any difficulties? 

 

Regards, 

Indrajith