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'