Skip to content

fix: improve card open performance on boards with many cards#8112

Open
nemphys wants to merge 1 commit into
nextcloud:mainfrom
nemphys:fix/card-open-performance
Open

fix: improve card open performance on boards with many cards#8112
nemphys wants to merge 1 commit into
nextcloud:mainfrom
nemphys:fix/card-open-performance

Conversation

@nemphys

@nemphys nemphys commented Jun 26, 2026

Copy link
Copy Markdown

Summary

Fixes severe UI lag when opening a card on boards with a large number of cards (e.g. 200+). Clicking a card to open its details could block the main thread for several seconds due to forced layout recalculations.

Problem

On boards with many cards, opening a card's sidebar was unbearably slow. Chrome DevTools showed multi-second main-thread blocks dominated by Recalculate Style, triggered from Vue's <transition-group> update logic (hasMovegetTransitionInfo).
Two issues compounded:

  1. <transition-group> on card labels — Each CardItem wrapped its label list in a <transition-group>. On any component update, Vue checks whether children have moved by reading layout from the DOM. With hundreds of cards (each potentially having multiple labels), this caused thousands of forced reflows on every interaction that updated the card list.
  2. $route in a computed propertycurrentCard depended on $route.params.cardId, so every card component re-rendered whenever the route changed (e.g. opening or closing the card sidebar), not just the previously selected and newly selected card.

Solution

  • Replace the label <transition-group> with a plain <ul>. Label add/remove zoom animations are dropped, which is an acceptable trade-off for large boards.
  • Track selection state in local isCurrentCard data, updated via a route watcher that only mutates state when this card's selection actually changes. Only the two affected cards re-render for the highlight border.

Checklist

  • Open a board with 100+ cards and click a card — sidebar should open without a noticeable delay
  • Verify the selected card still shows the primary-color border highlight
  • Close the sidebar and confirm the highlight is removed from the previously selected card
  • Confirm labels still render and label-filter clicks still work
  • Smoke-test on a board with few cards to ensure no regressions in normal use
  • Optional: record a Chrome Performance profile while opening a card — the long Recalculate Style block from hasMove should be gone

Signed-off-by: Dimitris Kazakos <nemphys@gmail.com>
Co-authored-by: Cursor <cursoragent@cursor.com>
@nemphys nemphys force-pushed the fix/card-open-performance branch from 205e059 to e80e189 Compare June 26, 2026 10:22
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Slow navigation

1 participant