Horizontal scroll is slow when a lot of data in batch approval table
Description
Floating horizontal scrollbar or sticky columns are really slowing down batch approval page (example: viewing 2 requisitions from EM, each has ~300 line items) - the table is nor responsive, it takes some time before scrollbar reacts.
Also the column headers are not working correctly - part of them dissapear while scrolling down.
Acceptance criteria:
Horizontal scroll works smoothly for big tables.
Sticky headers work as intended - thay are always visible when scrolling table vercitally.
Environment
Activity
Ok, progress — most of the lag is due to popover.directive.js
So.... we can't reach the performance goals that set by which were
... In this case 500 should be sufficient, as the EM req has between 200-300 or so products. A big issue though is the number of facilities (columns) that can be included. The idea would be to have the whole district included which is anywhere between 10-40 (80+ in the case of Lilongwe). Right now for EM they can only do about 5 facilities ...
An alternative approach to this issue is to make the table "internally" scroll, and fix the size of the table to fit around the other page elements.
Before | After | |
|---|---|---|
Screen Capture |
|
|
Performance Timeline |
|
|
Highest Frame Rate | 1 fps | 11 fps |
Lowest Frame Rate | 0.25 fps | 3 fps |
DOM Reflows | ~ 4 seconds per scroll event | None |
Hi . Are you planning to create a subsequent ticket to implement the potential table-based approach?
Tested and moved to done.
Assignee
Reporter
Labels
Story Points
Time tracking
Time remaining
Components
Sprint
Fix versions
Priority
