Skip to content

Use Vue list transitions and poll todos periodically

Thomas Hutterer requested to merge vue_todos_transition_group_no_fade into master

What does this MR do and why?

This MR makes a couple of changes to our new (internal beta) Vue implementation of the To-Dos dashboard (/dashboard/todos/vue):

  • Replaces the custom fade effect (after marking a todo as done/pending) with a Vue <transition-group>. Now clicking that same "Mark as..." button moves+fades the item out of the list, and moving its siblings up/down with a smooth transition.
  • To find such todos that got "marked as..." on the other tab, we now refetch the todos query on tab change. Otherwise we'd show the local cache in which that moved item wouldn't be.
  • To make this new way of "fading out" todos easier to implement, and also because no one needs it, this MR removes the All tab.
  • With that custom fade out of the way (which would have made an auto-reloading page very "jumpy", removing faded items on refetch), this MR goes a step further and adds a pollInterval to the query. Now the todos auto-update every 10 sec!
  • To not waste any resources while the tab isn't visible, a event listener was added to pause polling while document.hidden.

MR acceptance checklist

Please evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.

Screenshots or screen recordings

recording_1729158377976

How to set up and validate locally

Enable the todos_vue_application feature flag.

Edited by Thomas Hutterer

Merge request reports