chg: ページ読み込み速度の改善

ashcolor · Aug 12, 2024 · 4a35278 · 4a35278
1 parent 7d60b97
commit 4a35278
Showing 1 changed file with 26 additions and 17 deletions.
diff --git a/components/content/ProsePre.vue b/components/content/ProsePre.vue
@@ -28,34 +28,43 @@ const props = defineProps({
     },
 });
 
-const codeHtml = await codeToHtml(props.code.replace(/\n$/, ""), {
+const isLoading = ref(true);
+const codeHtml = ref("");
+codeToHtml(props.code.replace(/\n$/, ""), {
     lang: props.language,
     theme: "github-dark",
+}).then((html) => {
+    codeHtml.value = html;
+    isLoading.value = false;
 });
 </script>
 
 <template>
-    <div class="my-4">
-        <div v-if="props.filename" class="tabs">
+    <ClientOnly>
+        <div class="my-4">
+            <div v-if="props.filename" class="tabs">
+                <div
+                    class="tab flex cursor-default flex-row justify-start gap-1 bg-primary text-primary-content"
+                >
+                    <Icon name="mdi:file-outline"></Icon>
+                    <span>{{ props.filename }}</span>
+                </div>
+            </div>
             <div
+                v-else-if="
+                    props.filename ||
+                    ['bash', 'sh', 'zsh', 'PowerShell', 'Shell'].includes(props.language)
+                "
                 class="tab flex cursor-default flex-row justify-start gap-1 bg-primary text-primary-content"
             >
-                <Icon name="mdi:file-outline"></Icon>
-                <span>{{ props.filename }}</span>
+                <Icon name="mdi:keyboard-arrow-right"></Icon><span>{{ props.language }}</span>
             </div>
+            <!-- eslint-disable-next-line tailwindcss/no-custom-classname -->
+            <div v-if="isLoading" :class="props.class" class="prose-code">読み込み中</div>
+            <!-- eslint-disable-next-line tailwindcss/no-custom-classname -->
+            <div v-else :class="props.class" class="prose-code" v-html="codeHtml"></div>
         </div>
-        <div
-            v-else-if="
-                props.filename ||
-                ['bash', 'sh', 'zsh', 'PowerShell', 'Shell'].includes(props.language)
-            "
-            class="tab flex cursor-default flex-row justify-start gap-1 bg-primary text-primary-content"
-        >
-            <Icon name="mdi:keyboard-arrow-right"></Icon><span>{{ props.language }}</span>
-        </div>
-        <!-- eslint-disable-next-line tailwindcss/no-custom-classname -->
-        <div :class="props.class" class="prose-code" v-html="codeHtml"></div>
-    </div>
+    </ClientOnly>
 </template>
 
 <style>