Delay in Rendering

[David]

Hello,

There is a slight delay rendering the Sidebar when my page loads.

This results in the "main" content loading up and being visible, and then the Sidebar loading a split second later and "pushing" the content over.

Any suggestions on how to rectify this? Is this simply a limitation of using javascript based components with Blazor?

Thanks!

[Sowmiya Padmanaban]

Hi David,  

 

Greetings from Syncfusion support. 

 

We have checked your reported problem with sidebar component. We suspect that you are reported problem is that the sidebar pushes the main-content for certain delay. By default, we have set the transition for sidebar component. To resolve this case, you can change the transform for sidebar component as like depicted in the following code snippet.. 

 

Refer the below code snippet. 

 

<style> 

    .e-sidebar.e-left.e-open { 

        transform: rotateX(0deg); 

    } 

</style> 

 

Refer the sample link below. 

 

https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorApp12134927399.zip 

 

Refer the below links to know more about the Sidebar component. 

 

UG Documentation-https://blazor.syncfusion.com/documentation/sidebar/getting-started/ 

 

Demo link-https://blazor.syncfusion.com/demos/sidebar/default-functionalities/ 

 

API reference-https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.ISidebar.html 

 

Please let us know, if you need any further assistance. 

 

Regards,  

Sowmiya.P 

[CodeChaser]

Hi,

Adding that to the SidebarMenu example did not change the behavior.

Tom

[Shameer Ali Baig Sulaiman Ali Baig]

Hi Tom, 

 

From your last provided details, we suspected that your reported problem was transform was added with the sidebar component. 

 

We were unable to predict the exact problem which you are facing in your application and we were unable to understand what you are mentioning as delay in Sidebar component.  

 

We would like to let you know that by default, Sidebar will apply margin-left to its main content element on initialization, by executing some DOM element’s dimension calculations. This functionality will be carried out in the client-side. So, on page load Sidebar will initialize from server-side at first along with-it main container element. However, margin style will only apply from the client side. This is the default behavior of the Sidebar component. 

 

We were not sure about your reported problem. So, could you please share us video footage of your reported problem and share us more details regarding it. 

 

This detail would help us to understand and to provide you the prompt solution needed. 

 

Regards, 

Shameer Ali Baig S. 

[Yunus]

Hi,

I am dealing with same problem, I guess it is not solved yet.

For sharing the problem I created a new VS Blazor Server template project and on MainLayout.razor I added Syncfusion Sidebar instead of NavMenu component like this:

When I click refresh on browser Sidebar disappears for a moment and comes back. Please see attached video, the background of div is shown for a brief moment. Is there a way to prevent this?

Thanks & best regards

Attachment: Syncfusion_Sidebar_a6fd306f.rar

[Sharon Sanchez Selvaraj]

  

Hi Yunus, 

 

Thanks for the video attachment.  

 

We have checked with your provided code snippet and would like to mention that, from your video we suspect that the HTML elements (sidebar container div) are rendered for a fraction of second before the component is completely rendered. We suggest you to hide the required container initially and then load them back after the Sidebar component has been created. You can follow the same for any other required tags. 

 

Refer to the code snippet: 

 

<div class="page"> 

    <div class=@sidebar style="background:blue;"> 

<SfSidebar Width="250px" Animate="false" Created="created"> 

    <ChildContent> 

        <div style="text-align: center;" class="text-content"> 

            Left Sidebar 

        </div> 

    </ChildContent> 

</SfSidebar> 

</div> 

<div class="main"> 

    <div class="content px-4"> 

         @Body 

    </div> 

</div> 

</div> 

@code{ 

    public string sidebar = "hide"; 

    public void created(){ 

        sidebar = "show"; 

    } 

} 

<style> 

.hide{ 

    display:none; 

} 

.show{ 

    display:block; 

} 

</style> 

 

Refer to the sample: 

 

https://www.syncfusion.com/downloads/support/directtrac/general/ze/Sidebar-625093804 

 

Please get back to us if you need any further assistance. 

 

Regards, 

Sharon Sanchez S. 

[Yunus]

Hi Sharon,

Thanks for the quick answer.

I ran your sample but the same effect is observed on your sample too.

The attached video shows your sample running. The "Index Page" header is seen behind the sidebar.

Regards

Attachment: Syncfusion_Sidebar2_45218639.rar

[Sharon Sanchez Selvaraj]

Hi Yunus, 

 

Thanks for the video attachment. 

 

We would like to mention that, when the Sidebar component renders, it takes the width of the Sidebar and pushes the main content to the right with required margin-left value. This is the reason for the slight flickering scenario reported here. We have also changed the required transition for the main content in the shared sample. 

 

Refer to the code snippet: 

 

.e-content-animation{ 

                             transition:none; 

              } 

 

Refer to the sample link: 

 

https://www.syncfusion.com/downloads/support/directtrac/general/ze/Sidebar_Sample-1476628861 

 

If you face any issues in your application, please let us know the exact use case scenario and the difficulties you are facing so that we can check and provide a prompt solution. 

 

Regards, 

Sharon Sanchez S.