From dc6da38089a6a31f70174c8dae74cc1902dcbacc Mon Sep 17 00:00:00 2001
From: fly_mc <me@flymc.cc>
Date: Fri, 1 Nov 2024 09:04:33 +0800
Subject: [PATCH] Pari Plus add rendering optimization

---
 locales/en-US.yml                                   | 3 ++-
 locales/zh-CN.yml                                   | 1 +
 locales/zh-TW.yml                                   | 1 +
 packages/frontend/src/components/MkNote.vue         | 6 ++++--
 packages/frontend/src/components/MkNoteDetailed.vue | 9 ++++++++-
 packages/frontend/src/components/MkNotification.vue | 9 ++++++++-
 packages/frontend/src/pages/settings/pari.vue       | 2 ++
 packages/frontend/src/store.ts                      | 4 ++++
 8 files changed, 30 insertions(+), 5 deletions(-)

diff --git a/locales/en-US.yml b/locales/en-US.yml
index 5ce5f13b3..b2a59bafb 100644
--- a/locales/en-US.yml
+++ b/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"
diff --git a/locales/zh-CN.yml b/locales/zh-CN.yml
index ecf49ca02..2e7614bf7 100644
--- a/locales/zh-CN.yml
+++ b/locales/zh-CN.yml
@@ -1299,6 +1299,7 @@ pariPlusNoteSettings: "Pari Plus! 帖文设置"
 pariPlusAppearanceSettings: "Pari Plus! 外观设置"
 pariPlusFontPicker: "默认字体"
 useHardwareAcceleration: "启用硬件加速"
+enableRenderingOptimization: "启用渲染优化"
 autoTranslateButton: "在不同语言的帖文上显示翻译功能"
 showDetailTimeWhenHover: "悬浮/长按帖文时间戳时，展开详细时间"
 noteClickToOpen: "点击展开帖文详情"
diff --git a/locales/zh-TW.yml b/locales/zh-TW.yml
index ba7f79d6a..5d1345e3e 100644
--- a/locales/zh-TW.yml
+++ b/locales/zh-TW.yml
@@ -1299,6 +1299,7 @@ pariPlusNoteSettings: "Pari Plus! 貼文設定"
 pariPlusAppearanceSettings: "Pari Plus! 外觀設定"
 pariPlusFontPicker: "預設字體"
 useHardwareAcceleration: "啓用硬件加速"
+enableRenderingOptimization: "啓用渲染優化"
 autoTranslateButton: "在不同語言的貼文上顯示翻譯功能"
 showDetailTimeWhenHover: "長按貼文時間戳記時展開詳細時間"
 noteClickToOpen: "點擊展開貼文詳情"
diff --git a/packages/frontend/src/components/MkNote.vue b/packages/frontend/src/components/MkNote.vue
index 6d1b8deeb..b089be8e6 100644
--- a/packages/frontend/src/components/MkNote.vue
+++ b/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 {
diff --git a/packages/frontend/src/components/MkNoteDetailed.vue b/packages/frontend/src/components/MkNoteDetailed.vue
index 1b6d90be0..0490c5c2d 100644
--- a/packages/frontend/src/components/MkNoteDetailed.vue
+++ b/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;
diff --git a/packages/frontend/src/components/MkNotification.vue b/packages/frontend/src/components/MkNotification.vue
index 093bdb8b4..1be1d5477 100644
--- a/packages/frontend/src/components/MkNotification.vue
+++ b/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;
diff --git a/packages/frontend/src/pages/settings/pari.vue b/packages/frontend/src/pages/settings/pari.vue
index ccf007950..f2d9c38bb 100644
--- a/packages/frontend/src/pages/settings/pari.vue
+++ b/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'));
diff --git a/packages/frontend/src/store.ts b/packages/frontend/src/store.ts
index 5f270ad87..d4f23995f 100644
--- a/packages/frontend/src/store.ts
+++ b/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,