fix: refactor component imports for consistency

- Update imports for Breadcrumb and Footer components to use specific paths
- Lazy load SpecTabs, SpecOverview, and SpecDetailView components

Author: MarkusNeusinger

app/src/components/index.ts

@@ -11,7 +11,8 @@ import { API_URL, GITHUB_URL } from '../constants';
 import { buildSrcSet, getFallbackSrc, CATALOG_SIZES } from '../utils/responsiveImage';
 import { useAnalytics } from '../hooks';
 import { useAppData, useHomeState } from '../hooks';
-import { Breadcrumb, Footer } from '../components';
+import { Breadcrumb } from '../components/Breadcrumb';
+import { Footer } from '../components/Footer';
 import type { PlotImage } from '../types';
 
 interface CatalogSpec {

app/src/pages/CatalogPage.tsx

@@ -27,7 +27,7 @@ import WarningIcon from '@mui/icons-material/Warning';
 import CheckCircleIcon from '@mui/icons-material/CheckCircle';
 
 import { API_URL, LIBRARIES } from '../constants';
-import { Breadcrumb } from '../components';
+import { Breadcrumb } from '../components/Breadcrumb';
 
 // ============================================================================
 // Types

app/src/pages/DebugPage.tsx

@@ -9,7 +9,10 @@ import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';
 import type { PlotImage } from '../types';
 import type { ImageSize } from '../constants';
 import { useInfiniteScroll, useAnalytics, useFilterState, isFiltersEmpty } from '../hooks';
-import { Header, Footer, FilterBar, ImagesGrid } from '../components';
+import { Header } from '../components/Header';
+import { Footer } from '../components/Footer';
+import { FilterBar } from '../components/FilterBar';
+import { ImagesGrid } from '../components/ImagesGrid';
 import { useAppData, useHomeState } from '../hooks';
 
 export function HomePage() {

app/src/pages/HomePage.tsx

@@ -10,7 +10,7 @@ import OpenInNewIcon from '@mui/icons-material/OpenInNew';
 
 import { API_URL } from '../constants';
 import { useAnalytics } from '../hooks';
-import { Breadcrumb } from '../components';
+import { Breadcrumb } from '../components/Breadcrumb';
 
 // Initial dimensions - will be updated via postMessage from iframe
 const INITIAL_WIDTH = 1600;

app/src/pages/InteractivePage.tsx

@@ -10,7 +10,8 @@ import TableCell from '@mui/material/TableCell';
 import TableRow from '@mui/material/TableRow';
 
 import { useAnalytics } from '../hooks';
-import { Breadcrumb, Footer } from '../components';
+import { Breadcrumb } from '../components/Breadcrumb';
+import { Footer } from '../components/Footer';
 import { GITHUB_URL } from '../constants';
 
 export function LegalPage() {

app/src/pages/LegalPage.tsx

@@ -11,7 +11,8 @@ import TableHead from '@mui/material/TableHead';
 import TableRow from '@mui/material/TableRow';
 
 import { useAnalytics } from '../hooks';
-import { Breadcrumb, Footer } from '../components';
+import { Breadcrumb } from '../components/Breadcrumb';
+import { Footer } from '../components/Footer';
 import { GITHUB_URL } from '../constants';
 
 export function McpPage() {

app/src/pages/McpPage.tsx

@@ -2,7 +2,7 @@ import { Link } from 'react-router-dom';
 import { Helmet } from 'react-helmet-async';
 import Box from '@mui/material/Box';
 import Typography from '@mui/material/Typography';
-import { Footer } from '../components';
+import { Footer } from '../components/Footer';
 
 export function NotFoundPage() {
   return (

app/src/pages/NotFoundPage.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect, useMemo, useCallback } from 'react';
+import { useState, useEffect, useMemo, useCallback, lazy, Suspense } from 'react';
 import { useParams, useNavigate, Link } from 'react-router-dom';
 import { Helmet } from 'react-helmet-async';
 import Box from '@mui/material/Box';
@@ -14,8 +14,12 @@ import { API_URL, GITHUB_URL } from '../constants';
 import { useAnalytics } from '../hooks';
 import { useAppData } from '../hooks';
 import { LibraryPills } from '../components/LibraryPills';
-import { SpecTabs } from '../components/SpecTabs';
-import { Breadcrumb, Footer, SpecOverview, SpecDetailView } from '../components';
+import { Breadcrumb } from '../components/Breadcrumb';
+import { Footer } from '../components/Footer';
+
+const SpecTabs = lazy(() => import('../components/SpecTabs').then(m => ({ default: m.SpecTabs })));
+const SpecOverview = lazy(() => import('../components/SpecOverview').then(m => ({ default: m.SpecOverview })));
+const SpecDetailView = lazy(() => import('../components/SpecDetailView').then(m => ({ default: m.SpecDetailView })));
 import type { Implementation } from '../types';
 
 interface SpecDetail {
@@ -320,6 +324,7 @@ export function SpecPage() {
           {specData.description}
         </Typography>
 
+        <Suspense>
         {isOverviewMode ? (
           /* OVERVIEW MODE */
           <>
@@ -402,6 +407,7 @@ export function SpecPage() {
             />
           </>
         )}
+        </Suspense>
 
         <Footer onTrackEvent={trackEvent} selectedSpec={specId} selectedLibrary={selectedLibrary || ''} />
       </Box>