chore: preload highlighter languages for improved rendering in OACodeSamples

Author: enzonotario

e2e/local/home.spec.ts

@@ -4,6 +4,7 @@ test('home', async ({ page }) => {
   await page.goto('/')
 
   await expect(page).toHaveTitle(/VitePress OpenAPI/)
+  await page.waitForLoadState('networkidle')
   await expect(page).toHaveScreenshot({
     fullPage: true,
   })

e2e/local/onePage.spec.ts

@@ -3,6 +3,7 @@ import { expect, test } from '@playwright/test'
 test('onePage', async ({ page }) => {
   await page.goto('/one-page')
 
+  await page.waitForLoadState('networkidle')
   await expect(page).toHaveScreenshot({
     fullPage: true,
   })

e2e/local/tests.spec.ts

@@ -9,6 +9,7 @@ for (const pageSlug of pageSlugs) {
 
     await page.waitForSelector('h1')
 
+    await page.waitForLoadState('networkidle')
     await expect(page).toHaveScreenshot({
       fullPage: true,
     })

e2e/staging/home.spec.ts

@@ -11,6 +11,7 @@ test('home', async ({ page }) => {
   await page.goto('/')
 
   await expect(page).toHaveTitle(/VitePress OpenAPI/)
+  await page.waitForLoadState('networkidle')
   await expect(page).toHaveScreenshot({
     fullPage: true,
   })

e2e/staging/onePage.spec.ts

@@ -10,6 +10,7 @@ test('onePage', async ({ page }) => {
 
   await page.goto('/one-page')
 
+  await page.waitForLoadState('networkidle')
   await expect(page).toHaveScreenshot({
     fullPage: true,
   })

e2e/staging/sidebar.spec.ts

@@ -17,6 +17,7 @@ test.describe('sidebar', () => {
 
       await page.waitForSelector('h1')
 
+      await page.waitForLoadState('networkidle')
       await expect(page).toHaveScreenshot({
         fullPage: true,
       })

e2e/staging/tests.spec.ts

@@ -16,6 +16,7 @@ for (const pageSlug of pageSlugs) {
 
     await page.waitForSelector('h1')
 
+    await page.waitForLoadState('networkidle')
     await expect(page).toHaveScreenshot({
       fullPage: true,
     })

src/components/Sample/OACodeSamples.vue

@@ -3,6 +3,7 @@ import type { OperationData } from '@/lib/operation/operationData'
 import type { LanguageConfig } from '../../composables/useTheme'
 import { OPERATION_DATA_KEY } from '@/lib/operation/operationData'
 import { inject, ref, watch } from 'vue'
+import { useShiki } from '../../composables/useShiki'
 import { useTheme } from '../../composables/useTheme'
 import OACodeBlock from '../Common/OACodeBlock.vue'
 
@@ -24,6 +25,8 @@ const operationData = inject(OPERATION_DATA_KEY) as OperationData
 
 const themeConfig = useTheme()
 
+const shiki = useShiki()
+
 const availableLanguages = themeConfig.getCodeSamplesAvailableLanguages()
 
 const generator = themeConfig.getCodeSamplesGenerator()
@@ -83,6 +86,15 @@ watch(operationData.playground.request, async (playgroundRequest, _, onInvalidat
   if (cancelled) {
     return
   }
+
+  // Preload all highlighter languages
+  const uniqueHighlighters = [...new Set(nextSamples.map(s => s.highlighter).filter(Boolean))]
+  await Promise.all(uniqueHighlighters.map(lang => shiki.ensureLanguage(lang)))
+
+  if (cancelled) {
+    return
+  }
+
   samples.value = nextSamples
 
   if (!activeSampleKey.value || !samples.value.some(s => s.key === activeSampleKey.value)) {