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
@github-actions

Copy link
Copy Markdown
Contributor

Hello there,
Thank you so much for taking the time and effort to create a pull request to our Nextcloud project.

We hope that the review process is going smooth and is helpful for you. We want to ensure your pull request is reviewed to your satisfaction. If you have a moment, our community management team would very much appreciate your feedback on your experience with this PR review process.

Your feedback is valuable to us as we continuously strive to improve our community developer experience. Please take a moment to complete our short survey by clicking on the following link: https://cloud.nextcloud.com/apps/forms/s/i9Ago4EQRZ7TWxjfmeEpPkf6

Thank you for contributing to Nextcloud and we hope to hear from you soon!

(If you believe you should not receive this message, you can add yourself to the blocklist.)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Slow navigation

2 participants