Skip to content

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

Merged
grnd-alt merged 1 commit into
nextcloud:mainfrom
nemphys:fix/card-open-performance
Jul 8, 2026
Merged

fix: improve card open performance on boards with many cards#8112
grnd-alt merged 1 commit into
nextcloud:mainfrom
nemphys:fix/card-open-performance

Conversation

@nemphys

@nemphys nemphys commented Jun 26, 2026

Copy link
Copy Markdown
Contributor

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>

@grnd-alt grnd-alt left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

hey, thanks for your contribution!
Together with #8140 I think it could be possible to revert the transition-group change to keep the animations, but that's something to consider after the other pr is merged, so let's get this one in for now 🔥

@grnd-alt grnd-alt enabled auto-merge July 8, 2026 09:12
@grnd-alt grnd-alt merged commit baa917f into nextcloud:main Jul 8, 2026
35 checks passed
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

2 participants