about#emojisでcontent-visibilityを指定 (#361)

adzukimame · Dec 8, 2024 · ed82696 · ed82696
1 parent a1ed595
commit ed82696
Showing 1 changed file with 8 additions and 2 deletions.
diff --git 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>