perf: Performance improvements with concurrent API calls, abstracting common utilities, and freeing up the main thread periodically

Author: jackdomleo7

agents.md

@@ -46,6 +46,7 @@ pnpm run test:unit    # Run Vitest (add file path for specific tests) - must pas
 - `v-memo` on `v-for` lists to optimize re-renders
 - Use `defineAsyncComponent()` where appropriate
 - Fail fast and handle errors gracefully
+- This project can often deal with large datasets and needs to crawl large JSON objects
 
 **Component Design:**
 - Single responsibility principle

src/components/Features/AuditContent.vue

@@ -112,6 +112,7 @@ import Btn from '../Btn.vue'
 import InfoBanner from '../InfoBanner.vue'
 import Chip from '../Chip.vue'
 import { auditContent } from '@/features/audit'
+import { pluralize, highlightPattern } from '@/utils/textNormalization'
 import type { AsyncReturnType } from 'type-fest'
 
 const Card = defineAsyncComponent(() => import('../Card.vue'))
@@ -129,24 +130,6 @@ const patternsFound = ref<string[]>([])
 
 const hasResults = computed(() => results.value.length > 0)
 
-// Utility functions
-function pluralize(count: number, singular: string, plural: string): string {
-  return count === 1 ? singular : plural
-}
-
-function escapeHtml(str: string): string {
-  const div = document.createElement('div')
-  div.textContent = str
-  return div.innerHTML
-}
-
-function highlightPattern(text: string, pattern: string): string {
-  const escapedText = escapeHtml(text)
-  const escapedPattern = pattern.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
-  const regex = new RegExp(`(${escapedPattern})`, 'gi')
-  return escapedText.replace(regex, '<mark>$1</mark>')
-}
-
 function resetAudit(): void {
   results.value = []
   failedScopes.value = []

src/components/Features/ComponentsContent.vue

@@ -153,6 +153,7 @@ import InfoBanner from '../InfoBanner.vue'
 import Chip from '../Chip.vue'
 import { auditComponents } from '@/features/components'
 import type { ComponentsResponse } from '@/features/components'
+import { pluralize } from '@/utils/textNormalization'
 
 const Card = defineAsyncComponent(() => import('../Card.vue'))
 
@@ -169,10 +170,6 @@ const totalScanned = ref(0)
 const hasResults = computed(() => results.value.length > 0)
 const orphanCount = computed(() => results.value.filter((r) => r.usageCount === 0).length)
 
-function pluralize(count: number, singular: string, plural: string): string {
-  return count === 1 ? singular : plural
-}
-
 function resetAudit(): void {
   results.value = []
   failedScopes.value = []

src/components/Features/SearchContent.vue

@@ -135,7 +135,7 @@ import InfoBanner from '../InfoBanner.vue'
 import Chip from '../Chip.vue'
 import Toggle from '../Toggle.vue'
 import { searchContent } from '@/features/searchContent'
-import { normalizeWhitespace } from '@/utils/textNormalization'
+import { pluralize, highlightMatches } from '@/utils/textNormalization'
 import type { AsyncReturnType } from 'type-fest'
 
 const Card = defineAsyncComponent(() => import('../Card.vue'))
@@ -156,58 +156,6 @@ const totalItems = ref(0)
 
 const hasResults = computed(() => results.value.length > 0)
 
-// Utility functions
-function pluralize(count: number, singular: string, plural: string): string {
-  return count === 1 ? singular : plural
-}
-
-function escapeHtml(str: string): string {
-  const div = document.createElement('div')
-  div.textContent = str
-  return div.innerHTML
-}
-
-/**
- * Creates a regex pattern that matches a character and all its normalized variants.
- * For example, '£' should match both '£' and '£'.
- */
-function createVariantPattern(char: string): string {
-  const variants: Record<string, string[]> = {
-    "'": ["'", '&apos;', '&#39;', '\u2018', '\u2019'],
-    '"': ['"', '&quot;', '\u201C', '\u201D'],
-    '-': ['-', '&ndash;', '&mdash;', '\u2013', '\u2014'],
-    '£': ['£', '&pound;'],
-    '€': ['€', '&euro;'],
-    '&': ['&', '&amp;'],
-    '<': ['<', '&lt;'],
-    '>': ['>', '&gt;'],
-    ' ': [' ', '&nbsp;', '\u00A0'],
-  }
-
-  // If this character has known variants, match any of them
-  if (variants[char]) {
-    const escapedVariants = variants[char].map((v) => v.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'))
-    return `(?:${escapedVariants.join('|')})`
-  }
-
-  // Otherwise, just escape and match the character itself
-  return char.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
-}
-
-function highlightMatches(text: string, searchTerm: string): string {
-  const escapedText = escapeHtml(text)
-
-  // Normalize the search term to get the canonical form
-  const normalizedSearch = normalizeWhitespace(searchTerm.trim())
-
-  // Build a regex pattern that matches the search term and all its variant forms
-  const patternParts = Array.from(normalizedSearch).map(createVariantPattern)
-  const pattern = patternParts.join('')
-
-  const regex = new RegExp(`(${pattern})`, 'gi')
-  return escapedText.replace(regex, '<mark>$1</mark>')
-}
-
 function resetSearch(): void {
   results.value = []
   failedResource.value = null

src/features/audit.ts

@@ -280,56 +280,62 @@ export async function auditContent(
     // Build items with source type tracking
     const itemsWithSource: Array<{ data: unknown; sourceType: string }> = []
 
+    // Fan-out all data fetches concurrently for maximum throughput
+    const fetchPromises: Promise<void>[] = []
+
     // Fetch pages if any page types are selected
     if (selectedPageTypes.length > 0) {
       for (const pageType of selectedPageTypes) {
-        try {
-          const pages = await getAllPages({ token, pageType, preview })
-          pages.forEach((page) => {
-            itemsWithSource.push({ data: page, sourceType: pageType })
-          })
-          hasAnySuccessfulScope = true
-        } catch (error) {
-          console.error(`Failed to fetch page type "${pageType}":`, error)
-          failedScopes.push(`Page Type: ${pageType}`)
-        }
+        fetchPromises.push(
+          getAllPages({ token, pageType, preview })
+            .then((pages) => {
+              pages.forEach((page) => itemsWithSource.push({ data: page, sourceType: pageType }))
+              hasAnySuccessfulScope = true
+            })
+            .catch((error) => {
+              console.error(`Failed to fetch page type "${pageType}":`, error)
+              failedScopes.push(`Page Type: ${pageType}`)
+            }),
+        )
       }
     }
 
     // Fetch blog posts if enabled
     if (includeBlog) {
-      try {
-        const posts = await getAllPosts({ token, preview })
-        posts.forEach((post) => {
-          itemsWithSource.push({ data: post, sourceType: 'Blog' })
-        })
-        hasAnySuccessfulScope = true
-      } catch (error) {
-        console.error('Failed to fetch Blog posts:', error)
-        failedScopes.push('Blog')
-      }
+      fetchPromises.push(
+        getAllPosts({ token, preview })
+          .then((posts) => {
+            posts.forEach((post) => itemsWithSource.push({ data: post, sourceType: 'Blog' }))
+            hasAnySuccessfulScope = true
+          })
+          .catch((error) => {
+            console.error('Failed to fetch Blog posts:', error)
+            failedScopes.push('Blog')
+          }),
+      )
     }
 
     // Fetch collections if any collection keys are selected
     if (selectedCollectionKeys.length > 0) {
       for (const collectionKey of selectedCollectionKeys) {
-        try {
-          const collections = await getAllCollections({
-            token,
-            collectionType: collectionKey,
-            preview,
-          })
-          collections.forEach((collection) => {
-            itemsWithSource.push({ data: collection, sourceType: collectionKey })
-          })
-          hasAnySuccessfulScope = true
-        } catch (error) {
-          console.error(`Failed to fetch collection "${collectionKey}":`, error)
-          failedScopes.push(`Collection: ${collectionKey}`)
-        }
+        fetchPromises.push(
+          getAllCollections({ token, collectionType: collectionKey, preview })
+            .then((collections) => {
+              collections.forEach((collection) =>
+                itemsWithSource.push({ data: collection, sourceType: collectionKey }),
+              )
+              hasAnySuccessfulScope = true
+            })
+            .catch((error) => {
+              console.error(`Failed to fetch collection "${collectionKey}":`, error)
+              failedScopes.push(`Collection: ${collectionKey}`)
+            }),
+        )
       }
     }
 
+    await Promise.all(fetchPromises)
+
     // If all scopes failed, return error
     if (!hasAnySuccessfulScope) {
       return {

src/features/components.ts

@@ -114,15 +114,23 @@ export async function auditComponents(
   const failedScopes: string[] = []
   let totalScanned = 0
 
-  for (const pageType of selectedPageTypes) {
-    let pages: Butter.Page[]
-    try {
-      pages = await getAllPages({ token, preview, pageType })
-    } catch {
-      failedScopes.push(pageType)
-      continue
-    }
+  // Fetch all page types concurrently
+  const fetchedPages: Array<{ pages: Butter.Page[]; pageType: string }> = []
+  await Promise.all(
+    selectedPageTypes.map(async (pageType) => {
+      try {
+        const pages = await getAllPages({ token, preview, pageType })
+        fetchedPages.push({ pages, pageType })
+      } catch {
+        failedScopes.push(pageType)
+      }
+    }),
+  )
 
+  // Process all pages sequentially with periodic main-thread yields to avoid
+  // blocking the UI during large crawls (walkJson is a deep recursive tree-walk)
+  let pageIndex = 0
+  for (const { pages, pageType } of fetchedPages) {
     for (const page of pages) {
       totalScanned++
 
@@ -148,8 +156,10 @@ export async function auditComponents(
         }
       }
 
-      // Yield to the main thread between pages to avoid blocking during large crawls
-      await new Promise<void>((resolve) => setTimeout(resolve, 0))
+      // Yield to the main thread every 50 pages to avoid blocking during large crawls
+      if (++pageIndex % 50 === 0) {
+        await new Promise<void>((resolve) => setTimeout(resolve, 0))
+      }
     }
   }