From 9032e8cd6049cc698912f13b14966d5f7c909286 Mon Sep 17 00:00:00 2001
From: Dorian <dorian@Dorians-MacBook-Air.local>
Date: Wed, 4 Mar 2026 22:48:39 +0000
Subject: [PATCH] perf(app): lazy load PdfViewer and MapRenderer with loading
 skeletons

Uses defineAsyncComponent to lazy load heavy renderers, reducing
initial bundle size. Shows loading text while components load.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 packages/app/src/components/content/ContentPanel.vue | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/packages/app/src/components/content/ContentPanel.vue b/packages/app/src/components/content/ContentPanel.vue
index d76c9446..416bf7fe 100644
--- a/packages/app/src/components/content/ContentPanel.vue
+++ b/packages/app/src/components/content/ContentPanel.vue
@@ -215,7 +215,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, onMounted, onUnmounted, ref } from 'vue'
+import { computed, defineAsyncComponent, onMounted, onUnmounted, ref } from 'vue'
 import { useTheme } from '@/composables/useTheme'
 import { useContentPanel, type ContentTab } from '@/composables/useContentPanel'
 import { getRendererForContentType } from '@aiui/core'
@@ -232,8 +232,14 @@ import PodcastDetail from './PodcastDetail.vue'
 import NewsGrid from './NewsGrid.vue'
 import ArticleDetail from './ArticleDetail.vue'
 import ArticleReader from '@/components/renderers/ArticleReader.vue'
-import PdfViewer from '@/components/renderers/PdfViewer.vue'
-import MapRenderer from '@/components/renderers/MapRenderer.vue'
+const PdfViewer = defineAsyncComponent({
+  loader: () => import('@/components/renderers/PdfViewer.vue'),
+  loadingComponent: { template: '<div class="flex items-center justify-center h-32"><span class="text-sm text-white/50">Loading PDF viewer...</span></div>' },
+})
+const MapRenderer = defineAsyncComponent({
+  loader: () => import('@/components/renderers/MapRenderer.vue'),
+  loadingComponent: { template: '<div class="flex items-center justify-center h-32"><span class="text-sm text-white/50">Loading map...</span></div>' },
+})
 import MagazineGrid from './MagazineGrid.vue'
 import AppsGrid from './AppsGrid.vue'
 import ArchyAppsGrid from './ArchyAppsGrid.vue'