fix: improve card open performance on boards with many cards

Signed-off-by: Dimitris Kazakos <nemphys@gmail.com>
Co-authored-by: Cursor <cursoragent@cursor.com>

Author: nemphys

src/components/cards/CardItem.vue

@@ -6,7 +6,7 @@
 <template>
 	<AttachmentDragAndDrop v-if="card" :card-id="card.id" class="drop-upload--card">
 		<div :ref="`card${card.id}`"
-			:class="{'compact': compactMode, 'current-card': currentCard, 'no-labels': !hasLabels, 'card__editable': canEdit, 'card__archived': card.archived, 'card__highlight': highlight}"
+			:class="{'compact': compactMode, 'current-card': isCurrentCard, 'no-labels': !hasLabels, 'card__editable': canEdit, 'card__archived': card.archived, 'card__highlight': highlight}"
 			:style="{backgroundColor: color}"
 			tag="div"
 			:tabindex="0"
@@ -48,15 +48,13 @@
 			</div>
 
 			<div v-if="hasLabels" class="card-labels">
-				<transition-group v-if="card.labels && card.labels.length"
-					name="zoom"
-					tag="ul"
+				<ul v-if="card.labels && card.labels.length"
 					class="labels"
 					@click.stop="openCard">
 					<li v-for="label in labelsSorted" :key="label?.id ?? label?.title" :style="labelStyle(label)">
 						<span @click.stop="applyLabelFilter(label)">{{ label.title }}</span>
 					</li>
-				</transition-group>
+				</ul>
 				<CardMenu v-if="showMenuAtLabels"
 					:card="card"
 					class="right"
@@ -125,6 +123,7 @@ export default {
 		return {
 			highlight: false,
 			editingTitle: TITLE_EDITING_STATE.OFF,
+			isCurrentCard: false,
 		}
 	},
 	computed: {
@@ -158,9 +157,6 @@ export default {
 			const reference = this.card?.referenceData
 			return reference ? reference.openGraphObject.name : this.card.title
 		},
-		currentCard() {
-			return this.card && this.$route && this.$route.params.cardId === this.card.id
-		},
 		labelsSorted() {
 			return [...this.card.labels].sort((a, b) => (a.title < b.title) ? -1 : 1)
 		},
@@ -199,10 +195,21 @@ export default {
 		},
 	},
 	watch: {
-		currentCard(newValue) {
-			if (newValue) {
-				this.$nextTick(() => this.$el.scrollIntoView({ behavior: 'smooth', block: 'center', inline: 'center' }))
-			}
+		'$route.params.cardId': {
+			immediate: true,
+			handler(cardId) {
+				if (!this.card) {
+					return
+				}
+				const newValue = cardId && parseInt(cardId, 10) === this.card.id
+				if (newValue === this.isCurrentCard) {
+					return
+				}
+				this.isCurrentCard = newValue
+				if (newValue) {
+					this.$nextTick(() => this.$el.scrollIntoView({ behavior: 'smooth', block: 'center', inline: 'center' }))
+				}
+			},
 		},
 	},
 	methods: {