defect
As a result of implementing Ticket #27350, rows are generally "reloaded" when scrolling through a table. To do this, the client calculates how many rows are needed and where they should be placed. A request is then sent to the server so that it can render the requested rows. During this time, placeholders with a “glowing effect” are displayed, which the server later replaces with the content of the rows. This is intended to indicate to the user that additional rows are being loaded.
The styling of this placeholder and the corresponding animation are not ideal. The placeholder spans the entire row, and its color is much too dark. Furthermore, it would be desirable to have additional white space around its edges.
Implementation
A placeholder is rendered for each cell in the row so that the table structure remains recognizable. Additionally, padding was added to the placeholder table cells, and the placeholder’s color was adjusted.
The animation for the “glowing effect” has been modified. Initially, the placeholder has an opacity of 0 and gradually becomes fully visible as the animation progresses.
Test
Display a table with many rows and start scrolling. If the rows load too “quickly,” you can set a breakpoint in the developer tools in the file `table.js `, within the ` renderRows ` method on the line ` callbackBeforeRequest `, and observe the moment when placeholders are rendered but the corresponding request for rows has not yet been sent to the server.