Given a tracker that contains 1000 artifacts (50% closed) [0] And they are displayed in a roadmap widget, When user wants to toggle the display of closed elements, Then the UI should not take ages to reflect the change. The idea here is to use `v-show` instead of removing completely the node from the dom, so that vuejs/browser does not spend too much time at diffing and removing nodes. It's not perfect but improves a little bit performances: +--------+--------+--------+-----------------------------------+ | | Show | Hide | | | | closed | closed | Profile | +--------+--------+--------+-----------------------------------+ | Before | 11s | 70s | https://share.firefox.dev/2TepXBO | +--------+--------+--------+-----------------------------------+ | After | 6s | 6s | https://share.firefox.dev/3hpcM9b | +--------+--------+--------+-----------------------------------+ During this 6s, the browser is blocked therefore I didn't find a way to display a spinner (loading state in the tlp switch) because no animations are available. This should not have any impact on: * placement of popovers * dependencies arrows * toggle of children Bonus: * Now closed elements are hidden by default. * Use `v-once` on tasks popovers since their content is not supposed to change. Part of request #22193: Slow performance when there is a lot of closed item to hide [0] See XML structure and CSV examples in attachment of the linked request. Change-Id: I80abea35bf9f07ba2441185c76b976c314c05f63

+243 −110

Author

Nicolas Terray (nterray) 2021-06-30 14:03

Committer

Nicolas Terray (nterray) 2021-07-02 12:02

Hash da779ca48845a481615fb01fbeaad702e418a7b3

Parent ba6943ab739ab9ba28f82e42bbd94c3ad2fd74f8

Reference git #tuleap/stable/da779ca48845a481615fb01fbeaad702e418a7b3