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

None

Activity

Show:
Nick Reid
August 25, 2017, 1:59 PM

Ok, progress — most of the lag is due to popover.directive.js

Nick Reid
August 28, 2017, 10:44 PM

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.

Nick Reid
August 29, 2017, 4:12 PM
Edited

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

Ben Leibert
August 31, 2017, 9:42 PM

Hi . Are you planning to create a subsequent ticket to implement the potential table-based approach?

Sam Im
August 31, 2017, 11:32 PM

Tested and moved to done.

Done

Assignee

Nick Reid

Reporter

Weronika Ciecierska

Labels

None

Story Points

8

Time tracking

0m

Time remaining

5h

Components

Sprint

None

Fix versions

Priority

Major