Add Customizable Error Page Component

[ParagGhatage]

Description

This pull request introduces the following features:

1. Customizable Error Page Component:
   A reusable error page that displays dynamic error codes, messages, and provides options for retrying or redirecting to another page. This component enhances error handling and user experience by providing clear feedback for different error scenarios.

2. Election Data Fetching:
   On the homepage, election data is fetched asynchronously with enhanced error handling. If the data takes longer than expected, a timeout is triggered, and an error message is displayed. This improves the reliability of the data-fetching process and ensures the user is notified if the data cannot be loaded.

Key Features:

• Error Page Component:

  • Error Code: Displays the error code dynamically (defaults to 404 if not provided).
  • Error Message: Shows a customizable error message (defaults to "The page you're looking for doesn't exist or is unavailable").
  • Additional Details: Supports an optional additional details section to give more context on the error.
  • Retry Button: Includes a retry button (Reload), which is shown only when a retry handler function is provided.
  • Redirect Button: Offers a button for navigation, which can be customized to link back to any route (default is /).
  • Responsive Design: Fully responsive design using Tailwind CSS for both mobile and desktop views.
  • Image: Displays an image related to the error code, enhancing the visual representation of the error.

• Election Data Fetching:

  • Timeout Handling: A timeout is applied to the fetch request to handle cases where the data is not fetched in a timely manner.
  • Error Handling: The application will display an error message if the election data fetch fails due to network issues, API errors, or timeouts.
  • Loading State: Displays a loading state while the election data is being fetched and a clear error message if something goes wrong.

Motivation and Context

This pull request aims to improve both the error-handling experience on the site and the reliability of loading election data.

• Error Page: Enhances user experience by providing clear and customizable feedback when something goes wrong.
• Election Data Fetching: Ensures the homepage remains functional even if the election data is slow to load or an error occurs during the fetch. The timeout handling ensures users are notified in case of delays or issues.

Changes Made:

Election Component Update:

• Introduced a timeout for the fetch request to prevent long waiting times.
• Improved loading state and error messaging to guide the user.

Final Result:

error-component.-.Made.with.Clipchamp.mp4

[ParagGhatage]

@Ronnieraj37 ,
please review the changes for error component.
I have created new dynamic component for error page.