Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!


Topic: Angular Popover cause massive page slow downs

C-Contract priority asked 3 years ago


Expected behavior

Adding popovers to a page, clicking/hovering/js focusing should open the popover right away with no noticeable lag.

Actual behavior

Adding popovers to a page, clicking/hovering/js focusing causes the whole page to slow down and the popovers to open very slowly. We have tried all 3 methods above to open the popovers, all cause the same issue. We have tired performance fixes that fixed all of the other things causing slowdowns, but popovers still cause big slowdowns. We feel like we narrowed down the issue to being something within MDB, but are open to finding a fix we can do ourselves.

Resources (screenshots, code snippets etc.)

Gif of issue: https://media.giphy.com/media/tmXxtuhik8JwnBbmbo/giphy.gif

Popover Code (let me know what other code you need to see):

<mdb-icon
    fas
    icon="info-circle"
    class="text-primary"
    aria-hidden="true"
    mdbWavesEffect
    placement="left"
    [mdbPopover]="popoverTemplate"
    [mdbPopoverHeader]="field.label"
></mdb-icon>
<ng-template #popoverTemplate>
    <div [innerHtml]="field.tooltip"></div>
</ng-template>

Arkadiusz Idzikowski staff commented 3 years ago

Can you provide a full HTML/TS code that is responsible for rendering the whole form? That would help us to find the cause of the problem. We use many popovers in the same view in our demo app and it would be strange if the problem was caused by the popover itself or by the number of popovers rendered at the same time.

Does this also happen when you use popovers without a custom template (with only simple text message)?



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Opened

Specification of the issue

  • ForumUser: Priority
  • Premium support: Yes
  • Technology: MDB Angular
  • MDB Version: 9.4.0
  • Device: dekstop
  • Browser: All
  • OS: windows 10
  • Provided sample code: No
  • Provided link: Yes