From 5993d667f2b74bdfa70cf0f087c4937ffe41fb1d Mon Sep 17 00:00:00 2001
From: ThrRip <coding@thrrip.space>
Date: Fri, 22 Dec 2023 04:27:06 +0800
Subject: [PATCH] admin: Fix the lag when selecting big amount of songs

---
 packages/admin/components/PlaylistList.vue | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/packages/admin/components/PlaylistList.vue b/packages/admin/components/PlaylistList.vue
index 76a0204..40c3fdb 100644
--- a/packages/admin/components/PlaylistList.vue
+++ b/packages/admin/components/PlaylistList.vue
@@ -212,12 +212,14 @@
               pl-2.5 portrait:pl-2.5 portrait:pr-1 py-2.5 h-full rounded-lg cursor-pointer"
             >
               <input type="checkbox" class="hidden" @click="selectedIds.has(song.$id) ? selectedIds.delete(song.$id) : selectedIds.add(song.$id)">
-              <svg v-if="!selectedIds.has(song.$id)" class="!h-5 rounded-lg transition group-active:scale-90">
-                <use href="#far-square" />
-              </svg>
-              <svg v-if="selectedIds.has(song.$id)" class="!h-5 text-blue group-hover:text-blue-a rounded-lg transition group-active:scale-90">
-                <use href="#fas-square-check" />
-              </svg>
+              <ClientOnly>
+                <svg v-if="!selectedIds.has(song.$id)" class="!h-5 rounded-lg transition group-active:scale-90">
+                  <use href="#far-square" />
+                </svg>
+                <svg v-if="selectedIds.has(song.$id)" class="!h-5 text-blue group-hover:text-blue-a rounded-lg transition group-active:scale-90">
+                  <use href="#fas-square-check" />
+                </svg>
+              </ClientOnly>
             </label>
             <transition-group
               tag="span"