From ed826963ccdc297bdeee40978914d9e60ba8140c Mon Sep 17 00:00:00 2001
From: adzukimame <88547072+adzukimame@users.noreply.github.com>
Date: Sun, 8 Dec 2024 15:24:59 +0900
Subject: [PATCH] =?UTF-8?q?about#emojis=E3=81=A7content-visibility?=
 =?UTF-8?q?=E3=82=92=E6=8C=87=E5=AE=9A=20(#361)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/frontend/src/pages/about.emojis.vue | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/packages/frontend/src/pages/about.emojis.vue b/packages/frontend/src/pages/about.emojis.vue
index c91f92b9fdbc..c230ab6e3875 100644
--- a/packages/frontend/src/pages/about.emojis.vue
+++ b/packages/frontend/src/pages/about.emojis.vue
@@ -23,14 +23,14 @@ SPDX-License-Identifier: AGPL-3.0-only
 	<MkFoldableSection v-for="category in customEmojiCategories" v-once :key="category">
 		<template #header>{{ category || i18n.ts.other }}</template>
 		<div :class="$style.emojis">
-			<XEmoji v-for="emoji in customEmojis.filter(e => e.category === category)" :key="emoji.name" :emoji="emoji"/>
+			<XEmoji v-for="emoji in customEmojis.filter(e => e.category === category)" :key="emoji.name" :emoji="emoji" :class="{ [$style.skipRender]: defaultStore.state.skipNoteRender }"/>
 		</div>
 	</MkFoldableSection>
 
 	<MkFoldableSection v-once>
 		<template #header>{{ i18n.ts.other }}</template>
 		<div :class="$style.emojis">
-			<XEmoji v-for="emoji in customEmojis.filter(e => e.category === null)" :key="emoji.name" :emoji="emoji"/>
+			<XEmoji v-for="emoji in customEmojis.filter(e => e.category === null)" :key="emoji.name" :emoji="emoji" :class="{ [$style.skipRender]: defaultStore.state.skipNoteRender }"/>
 		</div>
 	</MkFoldableSection>
 </div>
@@ -46,6 +46,7 @@ import MkFoldableSection from '@/components/MkFoldableSection.vue';
 import { customEmojis, customEmojiCategories } from '@/custom-emojis.js';
 import { i18n } from '@/i18n.js';
 import { $i } from '@/account.js';
+import { defaultStore } from '@/store.js';
 
 const q = ref('');
 const searchEmojis = ref<EmojiSimple[]>([]);
@@ -70,4 +71,9 @@ watch(q, () => {
 	grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
 	grid-gap: 12px;
 }
+
+.skipRender {
+	content-visibility: auto;
+	contain-intrinsic-size: 190px 66px;
+}
 </style>