lfg2025/archy
1
0
Fork 0
Code Issues 24 Pull Requests 4 Actions Packages Projects Releases 72 Wiki Activity

perf(app): lazy load PdfViewer and MapRenderer with loading skeletons

Browse Source 
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>
This commit is contained in:
Dorian
2026-03-04 22:48:39 +00:00
co-authored by Claude Opus 4.6
parent 31241d8d12
commit 9032e8cd60
1 changed files with 9 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/app/src/components/content/ContentPanel.vue
+9 -3
View File
@@ -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'