perf: suspend QuickOverview and Monaco types loading (#1526)

packages/client/builtin/Monaco.vue

@@ -17,7 +17,10 @@ import lz from 'lz-string'
 import type * as monaco from 'monaco-editor'
 import { computed, nextTick, onMounted, ref } from 'vue'
 import type { RawAtValue } from '@slidev/types'
+import { whenever } from '@vueuse/core'
 import { makeId } from '../logic/utils'
+import { useSlideContext } from '../context'
+import { useNav } from '../composables/useNav'
 import CodeRunner from '../internals/CodeRunner.vue'
 
 const props = withDefaults(defineProps<{
@@ -76,6 +79,19 @@ const height = computed(() => {
   return props.height
 })
 
+const loadTypes = ref<() => void>()
+const { $page: thisSlideNo, $renderContext: renderContext } = useSlideContext()
+const { currentSlideNo } = useNav()
+const stopWatchTypesLoading = whenever(
+  () => Math.abs(thisSlideNo.value - currentSlideNo.value) <= 1 && loadTypes.value,
+  (loadTypes) => {
+    if (['slide', 'presenter'].includes(renderContext.value))
+      loadTypes()
+    else
+      setTimeout(loadTypes, 5000)
+  },
+)
+
 onMounted(async () => {
   // Lazy load monaco, so it will be bundled in async chunk
   const { default: setup } = await import('../setup/monaco')
@@ -137,11 +153,15 @@ onMounted(async () => {
     })
     editableEditor = editor
   }
-  if (props.ata) {
-    ata(editableEditor.getValue())
-    editableEditor.onDidChangeModelContent(debounce(1000, () => {
+  loadTypes.value = () => {
+    stopWatchTypesLoading()
+    import('#slidev/monaco-types')
+    if (props.ata) {
       ata(editableEditor.getValue())
-    }))
+      editableEditor.onDidChangeModelContent(debounce(1000, () => {
+        ata(editableEditor.getValue())
+      }))
+    }
   }
   const originalLayoutContentWidget = editableEditor.layoutContentWidget.bind(editableEditor)
   editableEditor.layoutContentWidget = (widget: any) => {

packages/client/internals/QuickOverview.vue

@@ -102,6 +102,11 @@ watchEffect(() => {
   // Watch rowCount, make sure up and down shortcut work correctly.
   overviewRowCount.value = rowCount.value
 })
+
+const activeSlidesLoaded = ref(false)
+setTimeout(() => {
+  activeSlidesLoaded.value = true
+}, 3000)
 </script>
 
 <template>
@@ -112,6 +117,7 @@ watchEffect(() => {
     leave-to-class="opacity-0 scale-102 !backdrop-blur-0px"
   >
     <div
+      v-if="value || activeSlidesLoaded"
       v-show="value"
       class="bg-main !bg-opacity-75 p-16 py-20 overflow-y-auto backdrop-blur-5px fixed left-0 right-0 top-0 h-[calc(var(--vh,1vh)*100)]"
       @click="close()"

packages/client/setup/monaco.ts

@@ -66,9 +66,6 @@ const setup = createSingletonPromise(async () => {
     module: monaco.languages.typescript.ModuleKind.ESNext,
   })
 
-  // Load types from server
-  import('#slidev/monaco-types')
-
   const ata = configs.monacoTypesSource === 'cdn'
     ? setupTypeAcquisition({
       projectName: 'TypeScript Playground',