Feat: Improve file upload progress feedback

[0bkevin]

Description

Improves the user experience during file uploads by providing clearer visual feedback about the upload and server processing stages.

Problem

Currently, when a user uploads files, the progress bar often stops at around 98% while the server processes the files (moving them to cloud storage, etc.). This can make users think the upload is stuck or has failed, potentially leading them to cancel the operation prematurely.

Solution

Implemented a two-stage progress indicator:

1. A linear progress bar that shows the actual file transfer progress (0-100%)
2. A circular indeterminate spinner that appears after the transfer is complete, indicating that server-side processing is in progress

Changes

• Added a new upload state tracking system with two states: 'idle', and 'processing'
• On state processing it shows the LoadingAnimation component inside a MUI Box component with some text.
• I applied these changes in every instance where LinearProgressBackdrop is used

Explanation

It seems that the progressEvent.total value changes at some point during the process. This might indicate that Axios somehow detects two separate operations taking place on the server. Taking advantage of this, you can identify the moment when the file has been successfully uploaded. At this point, you can stop displaying the progress bar and instead switch to showing the LoadingAnimation component.

Testing

• Tested with various file sizes and types
• Verified proper state transitions during uploads

Related Issues

Fixes #125

[skyl]

I like it. Sometimes for small files it's so fast that maybe it's a little jolting but I think for large files it will be very helpful.

[0bkevin]

Think I can manage to make it smoother for small files, would make another pr. @skyl