Implement comprehensive error boundaries, enhanced suspense fallbacks, and performance optimizations

[Copilot]

This PR implements a complete error handling and performance optimization system for the React application, addressing the need for better error boundaries, enhanced loading states, and performance improvements.

🎯 Changes Made

Error Boundary System

Implemented a comprehensive error boundary system using react-error-boundary:

• Root-level error boundaries in __root.tsx to catch critical application errors
• Route-level error boundaries in dashboard routes to handle page-specific failures
• Component-level error boundaries around data-heavy components like charts and tables
• Multiple fallback components for different error contexts:
  • ErrorFallback - General error handling with retry functionality
  • RouteErrorFallback - Page-level errors with navigation options
  • ComponentErrorFallback - Isolated component failures

Enhanced Loading States

Replaced basic "Loading..." text with rich skeleton-based loading components:

• PageLoader - Full-page loading with spinner and text
• TableLoader - Skeleton for data tables with rows and columns
• FormLoader - Form field skeletons for better UX
• CardLoader - Card-based skeleton components
• DashboardLoader - Grid-based skeleton for dashboard views
• InlineLoader - Small loading indicators for buttons/modals

Performance Optimizations

Implemented bundle optimization strategies for better loading performance:

• Manual chunk separation in Vite configuration for optimal vendor bundling:

  manualChunks: {
    'react-vendor': ['react', 'react-dom'],
    'query-vendor': ['@tanstack/react-query', '@tanstack/react-router'],
    'ui-vendor': ['@radix-ui/react-dialog', '@radix-ui/react-dropdown-menu', ...],
    'chart-vendor': ['recharts'],
    'form-vendor': ['react-hook-form', '@hookform/resolvers', 'zod'],
    'utils-vendor': ['date-fns', 'clsx', 'tailwind-merge']
  }

• Leveraged existing TanStack Router auto code-splitting for route-based lazy loading
• Strategic Suspense boundaries around async operations for better loading UX

📊 Performance Impact

Bundle Size Improvements

• Main bundle reduced from ~1.4MB to ~1.2MB (15% reduction)
• Vendor chunks separated for better browser caching:
  • react-vendor: 11.95 kB
  • query-vendor: 114.85 kB
  • ui-vendor: 103.93 kB
  • chart-vendor: 442.92 kB
  • form-vendor: 90.54 kB
  • utils-vendor: 53.74 kB

User Experience Improvements

• Enhanced error handling prevents application crashes and provides clear recovery options
• Rich loading states provide better feedback during data fetching operations
• Faster repeat visits due to improved vendor chunk caching strategy

🧪 Technical Details

The implementation focuses on minimal, surgical changes to existing code:

• Added error boundaries at strategic points without modifying existing component logic
• Enhanced loading states using existing skeleton components and design system
• Optimized build configuration without changing application architecture
• Leveraged TanStack Router's existing auto code-splitting capabilities

All changes maintain backward compatibility and follow the existing code patterns and design system.

---

💬 Share your feedback on Copilot coding agent for the chance to win a $200 gift card! Click here to start the survey.

[cloudflare-workers-and-pages]

Deploying nuts-client with    Cloudflare Pages

Latest commit:	56523a0
Status:	🚫  Build failed.

View logs

[cloudflare-workers-and-pages]

Deploying nuts-marketing with    Cloudflare Pages

Latest commit:	56523a0
Status:	🚫  Build failed.

View logs