perf(ui): defer vue-data-ui styles until chart mount

Author: trivikr

app/components/Compare/FacetBarChart.vue

@@ -14,8 +14,6 @@ import {
   copyAltTextForCompareFacetBarChart,
 } from '~/utils/charts'
 
-import('vue-data-ui/style.css')
-
 const props = defineProps<{
   values: (FacetValue | null | undefined)[]
   packages: string[]
@@ -24,6 +22,7 @@ const props = defineProps<{
   facetLoading?: boolean
 }>()
 
+const { stylesLoaded } = useVueDataUiStyles()
 const colorMode = useColorMode()
 const resolvedMode = shallowRef<'light' | 'dark'>('light')
 const rootEl = shallowRef<HTMLElement | null>(null)
@@ -278,7 +277,13 @@ const config = computed<VueUiHorizontalBarConfig>(() => {
 <template>
   <div class="font-mono facet-bar">
     <ClientOnly v-if="dataset.length">
-      <VueUiHorizontalBar :key="chartKey" :dataset :config class="[direction:ltr]">
+      <VueUiHorizontalBar
+        v-if="stylesLoaded"
+        :key="chartKey"
+        :dataset
+        :config
+        class="[direction:ltr]"
+      >
         <template #hint="{ isVisible }">
           <p v-if="isVisible" class="text-accent text-xs pt-2" aria-hidden="true">
             {{ $t('compare.packages.bar_chart_nav_hint') }}
@@ -338,6 +343,15 @@ const config = computed<VueUiHorizontalBarConfig>(() => {
           />
         </template>
       </VueUiHorizontalBar>
+      <template v-else>
+        <div class="flex flex-col gap-2 justify-center items-center mb-2">
+          <SkeletonInline class="h-4 w-16" />
+          <SkeletonInline class="h-4 w-28" />
+        </div>
+        <div class="flex flex-col gap-1">
+          <SkeletonInline class="h-7 w-full" v-for="pkg in packages" :key="pkg" />
+        </div>
+      </template>
 
       <template #fallback>
         <div class="flex flex-col gap-2 justify-center items-center mb-2">

app/components/Package/TrendsChart.vue

@@ -26,8 +26,6 @@ import {
 import { applyBlocklistCorrection, getAnomaliesForPackages } from '~/utils/download-anomalies'
 import { copyAltTextForTrendLineChart, sanitise, loadFile, applyEllipsis } from '~/utils/charts'
 
-import('vue-data-ui/style.css')
-
 const props = withDefaults(
   defineProps<{
     // For single package downloads history
@@ -61,6 +59,7 @@ const { locale } = useI18n()
 const { accentColors, selectedAccentColor } = useAccentColor()
 const { settings } = useSettings()
 const { copy, copied } = useClipboard()
+const { stylesLoaded } = useVueDataUiStyles()
 
 const colorMode = useColorMode()
 const resolvedMode = shallowRef<'light' | 'dark'>('light')
@@ -1877,6 +1876,7 @@ watch(selectedMetric, value => {
       <ClientOnly v-if="chartData.dataset">
         <div :data-pending="pending" :data-minimap-visible="maxDatapoints > 6">
           <VueUiXy
+            v-if="stylesLoaded"
             :dataset="normalisedDataset"
             :config="chartConfig"
             :class="{
@@ -2120,6 +2120,7 @@ watch(selectedMetric, value => {
               />
             </template>
           </VueUiXy>
+          <div v-else class="min-h-[260px]" />
         </div>
 
         <template #fallback>

app/components/Package/VersionDistribution.vue

@@ -11,15 +11,14 @@ import {
 import TooltipApp from '~/components/Tooltip/App.vue'
 import { copyAltTextForVersionsBarChart, sanitise, loadFile, applyEllipsis } from '~/utils/charts'
 
-import('vue-data-ui/style.css')
-
 const props = defineProps<{
   packageName: string
   inModal?: boolean
 }>()
 
 const { accentColors, selectedAccentColor } = useAccentColor()
 const { copy, copied } = useClipboard()
+const { stylesLoaded } = useVueDataUiStyles()
 
 const colorMode = useColorMode()
 const resolvedMode = shallowRef<'light' | 'dark'>('light')
@@ -455,7 +454,12 @@ const chartConfig = computed<VueUiXyConfig>(() => {
       <!-- Chart content -->
       <ClientOnly v-if="xyDataset.length > 0 && !error">
         <div class="chart-container w-full" :key="groupingMode">
-          <VueUiXy :dataset="xyDataset" :config="chartConfig" class="[direction:ltr]">
+          <VueUiXy
+            v-if="stylesLoaded"
+            :dataset="xyDataset"
+            :config="chartConfig"
+            class="[direction:ltr]"
+          >
             <!-- Keyboard navigation hint -->
             <template #hint="{ isVisible }">
               <p v-if="isVisible" class="text-accent text-xs -mt-6 text-center" aria-hidden="true">
@@ -634,6 +638,7 @@ const chartConfig = computed<VueUiXyConfig>(() => {
               />
             </template>
           </VueUiXy>
+          <div v-else />
         </div>
 
         <template #fallback>

app/components/Package/WeeklyDownloadStats.vue

@@ -9,8 +9,6 @@ import type { RepoRef } from '#shared/utils/git-providers'
 import type { VueUiSparklineConfig, VueUiSparklineDatasetItem } from 'vue-data-ui'
 import { onKeyDown } from '@vueuse/core'
 
-import('vue-data-ui/style.css')
-
 const props = defineProps<{
   packageName: string
   createdIso: string | null
@@ -20,6 +18,7 @@ const props = defineProps<{
 const router = useRouter()
 const route = useRoute()
 const { settings } = useSettings()
+const { stylesLoaded } = useVueDataUiStyles()
 
 const chartModal = useModal('chart-modal')
 const hasChartModalTransitioned = shallowRef(false)
@@ -424,7 +423,7 @@ const config = computed<VueUiSparklineConfig>(() => {
       <div class="w-full h-[76px] egg-pulse-target" :class="{ 'egg-pulse': eggPulse }">
         <template v-if="isLoadingWeeklyDownloads || hasWeeklyDownloads">
           <ClientOnly>
-            <VueUiSparkline class="w-full max-w-xs" :dataset :config>
+            <VueUiSparkline v-if="stylesLoaded" class="w-full max-w-xs" :dataset :config>
               <!-- Keyboard navigation hint -->
               <template #hint="{ isVisible }">
                 <p v-if="isVisible" class="text-accent text-xs text-center mt-2" aria-hidden="true">
@@ -437,6 +436,21 @@ const config = computed<VueUiSparklineConfig>(() => {
                 <div />
               </template>
             </VueUiSparkline>
+            <template v-else>
+              <div class="max-w-xs">
+                <div class="h-6 flex items-center ps-3">
+                  <SkeletonInline class="h-3 w-36" />
+                </div>
+                <div class="aspect-[500/80] flex items-center">
+                  <div class="w-[42%] flex items-center ps-0.5">
+                    <SkeletonInline class="h-7 w-24" />
+                  </div>
+                  <div class="flex-1 flex items-end pe-3">
+                    <SkeletonInline class="h-px w-full" />
+                  </div>
+                </div>
+              </div>
+            </template>
             <template #fallback>
               <!-- Skeleton matching VueUiSparkline layout (title 24px + SVG aspect 500:80) -->
               <div class="max-w-xs">

app/composables/useVueDataUiStyles.ts

@@ -0,0 +1,29 @@
+const vueDataUiStylesLoaded = shallowRef(false)
+let vueDataUiStylesPromise: Promise<void> | null = null
+
+async function loadVueDataUiStyles() {
+  if (vueDataUiStylesLoaded.value) {
+    return
+  }
+
+  if (!vueDataUiStylesPromise) {
+    vueDataUiStylesPromise = import('vue-data-ui/style.css').then(() => {
+      vueDataUiStylesLoaded.value = true
+    })
+  }
+
+  await vueDataUiStylesPromise
+}
+
+export function useVueDataUiStyles() {
+  if (import.meta.client) {
+    onMounted(() => {
+      void loadVueDataUiStyles()
+    })
+  }
+
+  return {
+    stylesLoaded: readonly(vueDataUiStylesLoaded),
+    ensureStylesLoaded: loadVueDataUiStyles,
+  }
+}