From 79b90e770b952f6c26663c76fca6f211763bbdca Mon Sep 17 00:00:00 2001 From: ryan Date: Thu, 19 Jun 2025 15:35:34 +0300 Subject: [PATCH] feat(page): implement loading spinner and error boundary for ItemsList component --- src/app/page.tsx | 221 ++++++++++++++++++++++++++--------------------- 1 file changed, 123 insertions(+), 98 deletions(-) diff --git a/src/app/page.tsx b/src/app/page.tsx index e68abe6..14ab0d4 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -1,103 +1,128 @@ -import Image from "next/image"; +'use client'; -export default function Home() { +import React, { Suspense } from 'react'; +import { ItemsList } from '@/components/ItemsList'; + +// Loading component for better UX +function LoadingSpinner() { return ( -
-
- Next.js logo -
    -
  1. - Get started by editing{" "} - - src/app/page.tsx - - . -
    2. -
  2. - Save and see your changes instantly. -
    3. -
- -
- - Vercel logomark - Deploy now - - - Read our docs - -
-
- +
+
+
+ Loading items... +
); } + +// Error boundary component +function ErrorFallback({ error, resetError }: { error: Error; resetError: () => void }) { + return ( +
+
+

+ Something went wrong +

+

+ {error.message || 'An unexpected error occurred while loading the items.'} +

+
+ + +
+
+
+ ); +} + +// Simple error boundary implementation +class ErrorBoundary extends React.Component< + { children: React.ReactNode; fallback: (error: Error, resetError: () => void) => React.ReactNode }, + { hasError: boolean; error?: Error } +> { + constructor(props: { children: React.ReactNode; fallback: (error: Error, resetError: () => void) => React.ReactNode }) { + super(props); + this.state = { hasError: false }; + } + + static getDerivedStateFromError(error: Error) { + return { hasError: true, error }; + } + + componentDidCatch(error: Error, errorInfo: React.ErrorInfo) { + console.error('Error caught by boundary:', error, errorInfo); + } + + render() { + if (this.state.hasError && this.state.error) { + return this.props.fallback(this.state.error, () => { + this.setState({ hasError: false, error: undefined }); + }); + } + + return this.props.children; + } +} + +export default function Home() { + // Get the current URL for the ItemsList component + const currentUrl = typeof window !== 'undefined' ? window.location.href : 'default'; + + return ( +
+ {/* Header */} +
+
+
+
+

+ CompareWare +

+
+
+ {/* Add navigation items here if needed */} +
+ Item Comparison Tool +
+
+
+
+
+ + {/* Main content */} +
+
+

+ Items Comparison +

+
+ + {/* Items list with error boundary and suspense */} + }> + }> + + + +
+ + {/* Footer */} + +
+ ); +} \ No newline at end of file