From cd46bb1628d5cdb8492976f6844a3c23c58b7fc7 Mon Sep 17 00:00:00 2001
From: FineArchs <133759614+FineArchs@users.noreply.github.com>
Date: Wed, 11 Sep 2024 19:55:59 +0900
Subject: [PATCH 1/3] MkCode fallback by unhighlighted pre

---
 packages/frontend/src/components/MkCode.vue | 29 ++++++++++-----------
 1 file changed, 14 insertions(+), 15 deletions(-)

diff --git a/packages/frontend/src/components/MkCode.vue b/packages/frontend/src/components/MkCode.vue
index 716dd926787..2309080f593 100644
--- a/packages/frontend/src/components/MkCode.vue
+++ b/packages/frontend/src/components/MkCode.vue
@@ -8,26 +8,20 @@ SPDX-License-Identifier: AGPL-3.0-only
 	<button v-if="copyButton" :class="$style.codeBlockCopyButton" class="_button" @click="copy">
 		<i class="ti ti-copy"></i>
 	</button>
-	<Suspense>
-		<template #fallback>
-			<MkLoading />
-		</template>
-		<XCode v-if="show && lang" :code="code" :lang="lang"/>
-		<pre v-else-if="show" :class="$style.codeBlockFallbackRoot"><code :class="$style.codeBlockFallbackCode">{{ code }}</code></pre>
-		<button v-else :class="$style.codePlaceholderRoot" @click="show = true">
-			<div :class="$style.codePlaceholderContainer">
-				<div><i class="ti ti-code"></i> {{ i18n.ts.code }}</div>
-				<div>{{ i18n.ts.clickToShow }}</div>
-			</div>
-		</button>
-	</Suspense>
+	<XCode v-if="show && lang && loaded" :code="code" :lang="lang"/>
+	<pre v-else-if="show" :class="$style.codeBlockFallbackRoot"><code :class="$style.codeBlockFallbackCode">{{ code }}</code></pre>
+	<button v-else :class="$style.codePlaceholderRoot" @click="show = true">
+		<div :class="$style.codePlaceholderContainer">
+			<div><i class="ti ti-code"></i> {{ i18n.ts.code }}</div>
+			<div>{{ i18n.ts.clickToShow }}</div>
+		</div>
+	</button>
 </div>
 </template>
 
 <script lang="ts" setup>
 import { defineAsyncComponent, ref } from 'vue';
 import * as os from '@/os.js';
-import MkLoading from '@/components/global/MkLoading.vue';
 import { defaultStore } from '@/store.js';
 import { i18n } from '@/i18n.js';
 import { copyToClipboard } from '@/scripts/copy-to-clipboard.js';
@@ -43,8 +37,13 @@ const props = withDefaults(defineProps<{
 });
 
 const show = ref(props.forceShow === true ? true : !defaultStore.state.dataSaver.code);
+const loaded = ref(false);
 
-const XCode = defineAsyncComponent(() => import('@/components/MkCode.core.vue'));
+const XCode = props.lang ? defineAsyncComponent(
+	() => import('@/components/MkCode.core.vue').then(
+		(xcode) => ((loaded.value = true), xcode)
+	)
+) : undefined;
 
 function copy() {
 	copyToClipboard(props.code);

From b1797fa553fab3f7afe31f995816f1edefc0cf74 Mon Sep 17 00:00:00 2001
From: FineArchs <133759614+FineArchs@users.noreply.github.com>
Date: Wed, 18 Sep 2024 08:11:45 +0900
Subject: [PATCH 2/3] use suspense again

---
 packages/frontend/src/components/MkCode.vue | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/packages/frontend/src/components/MkCode.vue b/packages/frontend/src/components/MkCode.vue
index 2309080f593..dd9b53078c4 100644
--- a/packages/frontend/src/components/MkCode.vue
+++ b/packages/frontend/src/components/MkCode.vue
@@ -8,14 +8,19 @@ SPDX-License-Identifier: AGPL-3.0-only
 	<button v-if="copyButton" :class="$style.codeBlockCopyButton" class="_button" @click="copy">
 		<i class="ti ti-copy"></i>
 	</button>
-	<XCode v-if="show && lang && loaded" :code="code" :lang="lang"/>
-	<pre v-else-if="show" :class="$style.codeBlockFallbackRoot"><code :class="$style.codeBlockFallbackCode">{{ code }}</code></pre>
-	<button v-else :class="$style.codePlaceholderRoot" @click="show = true">
+	<button v-if="!show" :class="$style.codePlaceholderRoot" @click="show = true">
 		<div :class="$style.codePlaceholderContainer">
 			<div><i class="ti ti-code"></i> {{ i18n.ts.code }}</div>
 			<div>{{ i18n.ts.clickToShow }}</div>
 		</div>
 	</button>
+	<Suspense v-else-if="lang">
+		<template #fallback>
+			<pre v-else :class="$style.codeBlockFallbackRoot"><code :class="$style.codeBlockFallbackCode">{{ code }}</code></pre>
+		</template>
+		<XCode :code="code" :lang="lang"/>
+	</Suspense>
+	<pre v-else :class="$style.codeBlockFallbackRoot"><code :class="$style.codeBlockFallbackCode">{{ code }}</code></pre>
 </div>
 </template>
 

From d6bf69d7bf5b7ef20b3e8f070bfb320e2d4eba47 Mon Sep 17 00:00:00 2001
From: FineArchs <133759614+FineArchs@users.noreply.github.com>
Date: Wed, 18 Sep 2024 08:16:45 +0900
Subject: [PATCH 3/3] fix

---
 packages/frontend/src/components/MkCode.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/frontend/src/components/MkCode.vue b/packages/frontend/src/components/MkCode.vue
index dd9b53078c4..4517a54e923 100644
--- a/packages/frontend/src/components/MkCode.vue
+++ b/packages/frontend/src/components/MkCode.vue
@@ -16,7 +16,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 	</button>
 	<Suspense v-else-if="lang">
 		<template #fallback>
-			<pre v-else :class="$style.codeBlockFallbackRoot"><code :class="$style.codeBlockFallbackCode">{{ code }}</code></pre>
+			<pre :class="$style.codeBlockFallbackRoot"><code :class="$style.codeBlockFallbackCode">{{ code }}</code></pre>
 		</template>
 		<XCode :code="code" :lang="lang"/>
 	</Suspense>