Multi-Step Upload Progress Tracker

Build a React component that displays a top loading bar during a multi-step file upload process, where progress advances incrementally based on completion of distinct upload stages.

Requirements

Create a UploadProgressTracker component that:

1. Displays a loading bar at the top of the page during file upload operations
2. Advances progress incrementally as upload stages complete
3. Provides a button to simulate a multi-step upload process
4. Shows the current progress percentage as text below the button

Upload Process Stages

The simulated upload should have 4 stages, each advancing the progress bar by 25%:

1. File validation (0% → 25%)
2. Preparing upload (25% → 50%)
3. Uploading chunks (50% → 75%)
4. Finalizing upload (75% → 100%)

Each stage should complete after a 500ms delay.

Component Behavior

• Initially, the loading bar should not be visible
• When the "Start Upload" button is clicked:
  • The loading bar appears at progress 0%
  • Each stage completes sequentially with visual progress updates
  • After the final stage reaches 100%, the loading bar should complete and disappear
• The progress text should update in real-time showing "Progress: X%"
• After upload completes, the button should be re-enabled for another upload

Test Cases

• Clicking "Start Upload" initializes the loading bar at 0% @test
• Progress advances to 25% after first stage completes @test
• Progress advances to 50% after second stage completes @test
• Progress advances to 75% after third stage completes @test
• Progress reaches 100% and completes after final stage @test

Implementation

@generates

API

/**
 * A React component that displays a top loading bar during multi-step upload operations
 */
export default function UploadProgressTracker(): JSX.Element;

Dependencies { .dependencies }

react-top-loading-bar { .dependency }

Provides the top loading bar component for visual progress indication.