1. Feedback
  2. Angular
  3. 27112

Welcome to the Angular feedback portal. We’re happy you’re here! If you have feedback on how to improve the Angular, we’d love to hear it!

  • Check out the features or bugs others have reported and vote on your favorites. Feedback will be prioritized based on popularity.
  • If you have feedback that’s not listed yet, submit your own.

Thanks for joining our community and helping improve Syncfusion products!

1
Vote

Sidebar shows on page load and cause flicker

Details:
when using <ejs-sidebar>, there is a flicker effect on page loading. This is because the ejs-sidebar is renderer on page load, but after the angular bindings are applied it dissapears (because I have set [isOpen]="false") so  it produces a flicker effect on load.

WorkAround:
*** FLICKER: visibility:hidden just hide the content but the height produce the flicker
*** FIX: with style="display:none" and onCreate(){this.sidebar.element.style.display='block'}
      the problem is fixed, using that instead of visibility:hidden

Very ugly workaround, It seems like syncfusion render unstyled elements, and then it apply the @Inputs set on the ejs-sidebar. Similar problem happens with button in this issue but I have not found a workaround:

https://www.syncfusion.com/feedback/27111/button-flicker-on-angular-page-load



Working Sample:

https://stackblitz.com/edit/angular-ivy-jmifqr?file=src/app/app.component.html
just refresh the stackblitz browser and you will see the flicker betweeb the main content and the green bar