From 0e5c8e77e6b581946f834167fbc86c5b6c62c976 Mon Sep 17 00:00:00 2001
From: Your Name <tushar.18246@gmail.com>
Date: Wed, 10 Jun 2026 19:59:58 +0530
Subject: [PATCH] feat: lazy load InteractivePreview with React.lazy + Suspense

Splits all 13 registry component modules into a separate chunk,
loaded only when the user scrolls to see a component preview.
Adds Suspense boundary with loading fallback per preview card.
---
 src/App.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 3e552dd5..8ec702e7 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -19,12 +19,10 @@ import {
   Heart,
   Code,
   Layers,
-  ArrowRight,
-  ChevronRight,
   X
 } from 'lucide-react';
 import { CATEGORIES, ALL_COMPONENTS as COMPONENTS } from './data/components';
-import { InteractivePreview } from './components/InteractivePreview';
+const InteractivePreview = React.lazy(() => import('./components/InteractivePreview').then(m => ({ default: m.InteractivePreview })));
 
 type TechFramework = 'html' | 'react' | 'nextjs' | 'vue' | 'angular';
 type ColorAccent = 'violet' | 'emerald' | 'rose' | 'blue' | 'amber';
@@ -475,7 +473,9 @@ export default function App() {
                           <div className="absolute inset-0 bg-[linear-gradient(to_right,#0f172a_1px,transparent_1px),linear-gradient(to_bottom,#0f172a_1px,transparent_1px)] bg-[size:24px_24px] [mask-image:radial-gradient(ellipse_60%_50%_at_50%_50%,#000_70%,transparent_100%)] opacity-30"></div>
                           
                           <div className={`w-full flex items-center justify-center transition-all duration-500 ${getSizingClass(compSize)}`}>
-                            <InteractivePreview id={comp.id} color={compAccent} />
+                            <React.Suspense fallback={<div className="text-xs text-slate-400 font-mono p-4 text-center animate-pulse">Loading preview...</div>}>
+                              <InteractivePreview id={comp.id} color={compAccent} />
+                            </React.Suspense>
                           </div>
                         </div>
                       </div>