Refactor timeline JS and lazy load user info cards #21529
+382
−383
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
2 tasks
cedric-anne
requested review from
AdrienClairembault,
cedric-anne and
orthagh
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Checklist before requesting a review
Description
Rendering the
templates/components/itilobject/layout.html.twigtemplate can take over 200ms even with only a few timeline items, The goal of this PR is to reduce the amount of things in the templates and reduce the amount of redundant calls to get user info cards.Before with the timeline tab content only:
64.8kb compressed (529 actual) at 260-340ms
After with the timeline tab content only:
59kb compressed (421 actual) at 250-320ms. Response size grows much less than before with timelines with a lot of items/actors.
Visual perception of timeline loading seems faster. Difference seems more noticeable on tickets with a lot of followups/tasks.
Only a slight delay loading user card tooltips on demand, but this also doesn't work until the timeline loads completely.
Performance should increase as less timeline HTML needs sent back to the browser. There is a ton of duplicated boilerplate stuff still.
For reference, in my Vue test I am only pulling 5.4kb of data for the same ticket and timeline items combined and can render the entire ticket timeline view in less than a second even with developer tools enabled and refreshing the page to bypass SPA. Only some data is missing due to the API not supporting it yet, but the majority is there. Also, The HLAPI could certainly stand to be optimized so the Vue app could be even more performant than currently seen.