Pari Plus add rendering optimization

locales/en-US.yml

@@ -1289,7 +1289,8 @@ pariPlusSystemSettings: "Pari Plus! system settings"
 pariPlusNoteSettings: "Pari Plus! note settings"
 pariPlusAppearanceSettings: "Pari Plus! appearance settings"
 pariPlusFontPicker: "Default fonts"
-useHardwareAcceleration: "Enable hardware Acceleration"
+enableRenderingOptimization: "Enable rendering optimization"
+useHardwareAcceleration: "Enable hardware acceleration"
 autoTranslateButton: "Display translation function on notes in different languages"
 showDetailTimeWhenHover: "Hover the timestamp of the note to expand the detailed time"
 noteClickToOpen: "Click to open note details"

locales/zh-CN.yml

@@ -1299,6 +1299,7 @@ pariPlusNoteSettings: "Pari Plus! 帖文设置"
 pariPlusAppearanceSettings: "Pari Plus! 外观设置"
 pariPlusFontPicker: "默认字体"
 useHardwareAcceleration: "启用硬件加速"
+enableRenderingOptimization: "启用渲染优化"
 autoTranslateButton: "在不同语言的帖文上显示翻译功能"
 showDetailTimeWhenHover: "悬浮/长按帖文时间戳时，展开详细时间"
 noteClickToOpen: "点击展开帖文详情"

locales/zh-TW.yml

@@ -1299,6 +1299,7 @@ pariPlusNoteSettings: "Pari Plus! 貼文設定"
 pariPlusAppearanceSettings: "Pari Plus! 外觀設定"
 pariPlusFontPicker: "預設字體"
 useHardwareAcceleration: "啓用硬件加速"
+enableRenderingOptimization: "啓用渲染優化"
 autoTranslateButton: "在不同語言的貼文上顯示翻譯功能"
 showDetailTimeWhenHover: "長按貼文時間戳記時展開詳細時間"
 noteClickToOpen: "點擊展開貼文詳情"

packages/frontend/src/components/MkNote.vue

@@ -9,7 +9,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 	v-show="!isDeleted"
 	ref="rootEl"
 	v-hotkey="keymap"
-	:class="[$style.root, { [$style.showActionsOnlyHover]: defaultStore.state.showNoteActionsOnlyHover, [$style.skipRender]: defaultStore.state.skipNoteRender }]"
+	:class="[$style.root, { [$style.showActionsOnlyHover]: defaultStore.state.showNoteActionsOnlyHover, [$style.skipRender]: defaultStore.state.skipNoteRender || defaultStore.state.enableRenderingOptimization }]"
 	:tabindex="isDeleted ? '-1' : '0'"
 >
     <div v-if="appearNote.reply && inReplyToCollapsed" :class="$style.collapsedInReplyTo">
@@ -762,7 +762,9 @@ function emitUpdReaction(emoji: string, delta: number) {
 
 .skipRender {
 	content-visibility: auto;
-	contain-intrinsic-size: 0 150px;
+	contain-intrinsic-size: 0 200px;
+	transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
+	will-change: opacity, transform;
 }
 
 .tip {

packages/frontend/src/components/MkNoteDetailed.vue

@@ -9,7 +9,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 	v-show="!isDeleted"
 	ref="rootEl"
 	v-hotkey="keymap"
-	:class="$style.root"
+	:class="[$style.root, { [$style.skipRender]: defaultStore.state.enableRenderingOptimization }]"
 	:tabindex="isDeleted ? '-1' : '0'"
 >
 	<div v-if="appearNote.reply && appearNote.reply.replyId">
@@ -705,6 +705,13 @@ onMounted(() => {
 	}
 }
 
+.skipRender {
+	content-visibility: auto;
+	contain-intrinsic-size: 0 200px;
+	transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
+	will-change: opacity, transform;
+}
+
 .footer {
 		display: flex;
 		align-items: center;

packages/frontend/src/components/MkNotification.vue

@@ -4,7 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<div :class="$style.root">
+<div :class="[$style.root, { [$style.skipRender]: defaultStore.state.enableRenderingOptimization }]">
 	<div :class="$style.head">
 		<MkAvatar v-if="['pollEnded', 'note'].includes(notification.type) && 'note' in notification" :class="$style.icon" :user="notification.note.user" link preview/>
 		<MkAvatar v-else-if="['roleAssigned', 'achievementEarned', 'exportCompleted', 'login'].includes(notification.type)" :class="$style.icon" :user="$i" link preview/>
@@ -233,6 +233,13 @@ function getActualReactedUsersCount(notification: Misskey.entities.Notification)
 	--eventOther: #88a6b7;
 }
 
+.skipRender {
+	content-visibility: auto;
+	contain-intrinsic-size: 0 200px;
+	transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
+	will-change: opacity, transform;
+}
+
 .head {
 	position: sticky;
 	top: 0;

packages/frontend/src/pages/settings/pari.vue

@@ -12,6 +12,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 		<div class="_gaps_m">
 			<div class="_gaps_s">
 				<MkSwitch v-model="useHardwareAcceleration">{{ i18n.ts.useHardwareAcceleration }}</MkSwitch>
+				<MkSwitch v-model="enableRenderingOptimization">{{ i18n.ts.enableRenderingOptimization }}</MkSwitch>
 			</div>
 		</div>
 	</FormSection>
@@ -111,6 +112,7 @@ function saveFontSize() {
 }
 
 const useHardwareAcceleration = computed(defaultStore.makeGetterSetter('useHardwareAcceleration'));
+const enableRenderingOptimization = computed(defaultStore.makeGetterSetter('enableRenderingOptimization'));
 
 const autoTranslateButton = computed(defaultStore.makeGetterSetter('autoTranslateButton'));
 const showDetailTimeWhenHover = computed(defaultStore.makeGetterSetter('showDetailTimeWhenHover'));

packages/frontend/src/store.ts

@@ -512,6 +512,10 @@ export const defaultStore = markRaw(new Storage('base', {
 		where: 'device',
 		default: true,
 	},
+	enableRenderingOptimization: {
+		where: 'device',
+		default: true,
+	},
 	autoTranslateButton: {
 		where: 'device',
 		default: false,