Improved Error Handling & Enhanced Loading Experience

[ParagGhatage]

Description

This PR combines enhancements for error handling and loading experience in the app. It includes:

• Dynamic Error Page Component: A reusable error page that can be displayed dynamically based on error types. It supports custom messages, error codes, and UI elements to improve user feedback.
• Infinite Loading Timeout: Implemented a 7-second timeout for content loading. If the content fails to load within this period, the loading indicator stops, and a fallback message or error page is displayed.
• New Honeycomb Loader: Replaced the previous loading animation with a more polished, visually engaging Honeycomb-shaped loader that aligns with the blockchain theme.
• Simplified 404 Page: Removed unnecessary buttons and the card wrapper, rendering the error message directly on the screen for a cleaner look.

Changes Made

1. ErrorPage Component

   • Created a reusable component to display error messages across the app.
   • Accepts custom messages and error codes for better UX.
   • Can be used anywhere in the app.

2. Loading Timeout

   • Implemented a timeout mechanism for content loading.
   • If loading exceeds 7 seconds, an error page or fallback message is displayed.

3. New Loader

   • Added a new Honeycomb-shaped loader.
   • Provides a smoother and more visually appealing loading animation.

4. 404 Page Refinement

   • Removed buttons and card wrapping.
   • Directly renders the error message for a simpler design.

Before and After

Before

• Infinite loading issues when content fails to load.
• Basic and unappealing loader animation.
• Overly styled 404 page with buttons and a card wrapper.

After

• Loading timeout ensures users get feedback within 7 seconds.
• Visually improved Honeycomb loader.
• Clean and minimal 404 page.

Files Changed

• client/app/components/Helper/ErrorPage.tsx (New dynamic error page)
• client/app/components/Helper/Loader.tsx (New Honeycomb loader)

Checklist

• Code works as expected
• Linting and formatting checks pass
• Feature tested successfully

Issue Resolved

This PR closes:

• Fixes Add Reusable Error Page for multiple Error Types #92 (Error page)

Screenshots

[ParagGhatage]

@Ronnieraj37 ,
Please take look.

[Ronnieraj37]

Can you please fix the conflict with package-lock in client

[ParagGhatage]

@Ronnieraj37 ,
Working on it.

[ParagGhatage]

@Ronnieraj37 ,
I have resolved all the merge conflicts.

[Ronnieraj37]

I was testing your branch and this is how the navbar looks like.

[Ronnieraj37]

The loader doesn't end even after 7 seconds. I also don't think that this is the loader you suggested?

[ParagGhatage]

I was testing your branch and this is how the navbar looks like.

It was due to earlier Merge.
I have fixed that in #135

[ParagGhatage]

The loader doesn't end even after 7 seconds. I also don't think that this is the loader you suggested?

Give me a second.
I will test that right now.

[ParagGhatage]

@Ronnieraj37 ,
I checked it.
Its loading correctly.
and elections are also getting loaded.

[Ronnieraj37]

I cloned your branch. The PR #135 was closed. I'm also not satisfied with the UI, including the loader, its positioning, and the loading error page. I might merge this later, but it will definitely be overridden by #142 .

[ParagGhatage]

I cloned your branch. The PR #135 was closed. I'm also not satisfied with the UI, including the loader, its positioning, and the loading error page. I might merge this later, but it will definitely be overridden by #142 .

Got it.