[ADE-66] Add error handling and animation components to ProcessingPage for improved user feedback

[adamrefaey]

Change

This pull request enhances the ProcessingPage by introducing better error handling, modularizing components, and improving the user experience with animations and error states. Key changes include the addition of new components for error and animation handling, refactoring the status-checking logic, and updating the SCSS for styling.

Component Modularization and Reusability:

• Added a new ProcessingAnimation component to encapsulate the animation and processing message. (frontend/src/pages/Processing/components/ProcessingAnimation.tsx)
• Added a new ProcessingError component to handle and display error states with retry and upload actions. (frontend/src/pages/Processing/components/ProcessingError.tsx)

Error Handling Improvements:

• Refactored the status-checking logic to include a clearStatusCheckInterval function for better cleanup and error handling. (frontend/src/pages/Processing/ProcessingPage.tsx) [1] [2]
• Enhanced error messaging and introduced a retry mechanism via the handleRetry function. (frontend/src/pages/Processing/ProcessingPage.tsx)

Styling Enhancements:

• Added new SCSS styles for error states, including error headers, icons, and action buttons. (frontend/src/pages/Processing/ProcessingPage.scss)

Code Simplification:

• Moved the file processing logic outside of useEffect to make it reusable for retry attempts. (frontend/src/pages/Processing/ProcessingPage.tsx)

These changes improve code readability, maintainability, and the overall user experience on the ProcessingPage.

Does this PR introduce a breaking change?

{...}

What needs to be documented once your changes are merged?

{...}

Additional Comments

{...}

[Copilot]

Pull Request Overview

This pull request improves the user experience on the ProcessingPage by modularizing error and animation handling and enhancing error reporting while refactoring status-checking logic for better resource cleanup.

• Introduces new ProcessingError and ProcessingAnimation components.
• Refactors the status-checking logic with an extracted clearStatusCheckInterval function and a retry mechanism.
• Updates styling in SCSS to better support error states and animations.

Reviewed Changes

Copilot reviewed 3 out of 4 changed files in this pull request and generated no comments.

File	Description
frontend/src/pages/Processing/components/ProcessingError.tsx	New error display component with retry and new upload actions.
frontend/src/pages/Processing/components/ProcessingAnimation.tsx	New component handling processing animations and messages.
frontend/src/pages/Processing/ProcessingPage.tsx	Refactored error handling, status-check logic, and integrated new components.

Files not reviewed (1)

• frontend/src/pages/Processing/ProcessingPage.scss: Language not supported

Comments suppressed due to low confidence (1)

frontend/src/pages/Processing/ProcessingPage.tsx:116

• [nitpick] The variable name 'hasInitiatedProcessing' could be made more descriptive (e.g., 'processingStarted') to clarify its purpose for future maintainers.

hasInitiatedProcessing.current = true; // Mark as initiated before fetching