Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

nbPopover perfomance lag after repeat in loop #1467

Open
1 of 2 tasks
Newan opened this issue May 13, 2019 · 1 comment · May be fixed by #2837
Open
1 of 2 tasks

nbPopover perfomance lag after repeat in loop #1467

Newan opened this issue May 13, 2019 · 1 comment · May be fixed by #2837
Assignees
@evtkhvch
Labels
bug module:components P2: important performance
Projects
Now

Comments

@Newan
Copy link

Newan commented May 13, 2019

Issue type

I'm submitting a ... (check one with "x")

  • bug report
  • feature request

Issue description

Current behavior:

In my app i use nbPopover in a table with > 100 rows.
After 80 rows it lags on the popover event for seconds

Expected behavior:

The popup show instantly on an mouseclick

Steps to reproduce:

create a simple loop with an button in the popover example:

this.numbers = Array(500).fill(0).map((x, i) => i); // generate tmp Array

<div *ngFor="let number of numbers" >
  <button nbButton outline nbPopover="Hi, I'm popover!" nbPopoverPlacement="bottom">Open Popover</button>
</div>

See sample App:
https://stackblitz.com/edit/angular-n5w8ye

Other information:

npm: 6.4.1
os: windows
Browser: Testing in Chrome / IE

Angular, Nebular, see Starblitz

"@angular/animations": "^7.0.0",
    "@angular/cdk": "^7.2.1",
    "@angular/common": "^7.2.5",
    "@angular/compiler": "^7.2.5",
    "@angular/core": "^7.2.5",
    "@angular/forms": "^7.2.5",
    "@angular/platform-browser": "^7.2.5",
    "@angular/platform-browser-dynamic": "^7.2.5",
    "@angular/router": "^7.2.5",
    "@nebular/theme": "^3.5.0",
    "core-js": "^2.6.5",
    "nebular-icons": "^1.1.0",
    "rxjs": "^6.4.0",
    "zone.js": "^0.8.29"
@matthewmullin01
Copy link

I ran into the same problem. I am guessing that however Nebular (or Angular internally) is keeping references to each item in the list get quite computationally expensive.

I had the same issue with using Context Menu.

My solution was to revert to using standard Bootstrap Popovers (or Dropdown as a replacement for the ContextMenu). (Note this requires bootstrap)

Replace

<div *ngFor="let number of numbers" >
  <button nbButton outline nbPopover="Hi, I'm popover!" nbPopoverPlacement="bottom">Open Popover</button>
</div>

With

<div *ngFor="let number of numbers" >
  <button nbButton outline data-toggle="popover" data-placement="bottom" data-content="Hi, I'm popover!">
    Open Popover
  </button>
</div>

@yggg yggg added this to To do in Now via automation Aug 17, 2021
@evtkhvch evtkhvch self-assigned this Aug 17, 2021
@evtkhvch evtkhvch moved this from To do to In progress in Now Aug 17, 2021
@evtkhvch evtkhvch linked a pull request Aug 20, 2021 that will close this issue
Draft
2 tasks
@evtkhvch evtkhvch moved this from In progress to Review in progress in Now Aug 20, 2021
@evtkhvch evtkhvch mentioned this issue Sep 7, 2021
Closed
1 task
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@evtkhvch evtkhvch

Labels
bug module:components P2: important performance
Projects
Now
Review in progress
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix(overlay-trigger): performance lag after repeat in loop evtkhvch/nebular
4 participants
@Newan @yggg @matthewmullin01 @evtkhvch