[YW] Live Queries tab is slow to load and feels sluggish when clicking elements #6289
Assignees
Labels
Projects
Milestone
Comments
andrewc-dev
added
area/platform
andrewc-dev
pushed a commit
that referenced
this issue
Nov 6, 2020
…ge number of DOM nodes in rows Summary: Live Queries tab is extremely sluggish and takes a long time to render even though the API returns the data relatively quickly. Even once the page is finished rendering clicking anywhere on the page lags significantly, even for something simple like a right click. The reason behind this slowness is the huge number of DOM nodes that were created from the batch queries, which on the portal had over 45kB of data. Each data row was creating roughly 4000 additional nodes when the query string was passed to highlight.js, so having three or more entries caused the page to completely freeze up because the re-renders and layout calculations were taking so long. The solution is to simply truncate the query text for the tabular data because we do not display the excess text anyways. Once the user clicks on a specific row, then we render the side panel with the large amount of DOM nodes. This change also sets a `max-height` for the code block in the side panel to avoid the text taking up the entire panel. In addition, the clearing of search tokens was not resetting the data rows as expected if the search token being cleared was a user defined string (as opposed to a column key token). Test Plan: Go to AWS portal and navigate to pf-3 universe. Click the Queries tab and observe what happens. The change should allow the table to load significantly faster. Reviewers: sshevchenko Reviewed By: sshevchenko Subscribers: ui Differential Revision: https://phabricator.dev.yugabyte.com/D9848
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
After running performance profiling on the live queries page, there seem to be performance bottlenecks around the layout recalculations.
Relevant issue: https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing?utm_source=devtools#avoid-forced-synchronous-layouts
The text was updated successfully, but these errors were encountered: