From 44d88f76532e5b9f7364210fafd3fc6c376c03cc Mon Sep 17 00:00:00 2001
From: Fringg <egor.andrianovv@gmail.com>
Date: Wed, 25 Feb 2026 08:14:13 +0300
Subject: [PATCH] perf: prefetch background chunk on page load from
 localStorage cache
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add prefetchBackground() to registry — triggers dynamic import
  without creating React component
- Call prefetch at module init in BackgroundRenderer using cached
  config from localStorage, before React renders
- Background JS chunk starts downloading immediately instead of
  waiting for Suspense to trigger lazy() import
---
 .../backgrounds/BackgroundRenderer.tsx        | 10 ++++++-
 src/components/ui/backgrounds/registry.ts     | 26 +++++++++++++++++++
 2 files changed, 35 insertions(+), 1 deletion(-)

diff --git a/src/components/backgrounds/BackgroundRenderer.tsx b/src/components/backgrounds/BackgroundRenderer.tsx
index 17137b6..54f790c 100644
--- a/src/components/backgrounds/BackgroundRenderer.tsx
+++ b/src/components/backgrounds/BackgroundRenderer.tsx
@@ -3,7 +3,7 @@ import { useQuery } from '@tanstack/react-query';
 import { brandingApi } from '@/api/branding';
 import type { AnimationConfig, BackgroundType } from '@/components/ui/backgrounds/types';
 import { DEFAULT_ANIMATION_CONFIG } from '@/components/ui/backgrounds/types';
-import { backgroundComponents } from '@/components/ui/backgrounds/registry';
+import { backgroundComponents, prefetchBackground } from '@/components/ui/backgrounds/registry';
 
 const ANIMATION_CACHE_KEY = 'cabinet_animation_config';
 
@@ -16,6 +16,14 @@ function getCachedConfig(): AnimationConfig | null {
   }
 }
 
+// Prefetch the background JS chunk immediately based on localStorage cache.
+// This starts the download before React even renders, so by the time
+// Suspense needs the component, the chunk is already loaded.
+const cachedConfig = getCachedConfig();
+if (cachedConfig?.enabled && cachedConfig.type && cachedConfig.type !== 'none') {
+  prefetchBackground(cachedConfig.type);
+}
+
 function setCachedConfig(config: AnimationConfig) {
   try {
     localStorage.setItem(ANIMATION_CACHE_KEY, JSON.stringify(config));
diff --git a/src/components/ui/backgrounds/registry.ts b/src/components/ui/backgrounds/registry.ts
index 45aa514..18638d7 100644
--- a/src/components/ui/backgrounds/registry.ts
+++ b/src/components/ui/backgrounds/registry.ts
@@ -1,6 +1,32 @@
 import { lazy, type ComponentType } from 'react';
 import type { BackgroundType, BackgroundDefinition } from './types';
 
+// Raw import functions for prefetching (doesn't create React components)
+const backgroundImports: Record<Exclude<BackgroundType, 'none'>, () => Promise<unknown>> = {
+  aurora: () => import('./aurora-background'),
+  sparkles: () => import('./sparkles'),
+  vortex: () => import('./vortex'),
+  'shooting-stars': () => import('./shooting-stars'),
+  'background-beams': () => import('./background-beams'),
+  'background-beams-collision': () => import('./background-beams-collision'),
+  'gradient-animation': () => import('./background-gradient-animation'),
+  wavy: () => import('./wavy-background'),
+  'background-lines': () => import('./background-lines'),
+  boxes: () => import('./background-boxes'),
+  meteors: () => import('./meteors'),
+  grid: () => import('./grid-background'),
+  dots: () => import('./grid-background'),
+  spotlight: () => import('./spotlight-bg'),
+  ripple: () => import('./background-ripple'),
+};
+
+/** Prefetch the JS chunk for a background type (call early to avoid lazy-load delay) */
+export function prefetchBackground(type: BackgroundType): void {
+  if (type !== 'none' && backgroundImports[type]) {
+    backgroundImports[type]();
+  }
+}
+
 // Lazy-loaded components — only the selected type is fetched
 export const backgroundComponents: Record<
   Exclude<BackgroundType, 'none'>,