Add Timeout and Progress Feedback for Large CSV File Processing

[pragmaticAweds]

Context & Impact

In csv-processing.ts, the file size is validated at 1MB max, but the file.text() call that reads the file content has no timeout. For files approaching the 1MB limit with thousands of rows, parsing can take several seconds. During this time, the user sees no progress indicator, no loading state, and no way to cancel. If the file is malformed, the parser may hang or take excessively long.

Why this matters: Users uploading CSV files for bulk token distribution expect immediate feedback. A file with 10,000 recipients is a legitimate use case, but the current implementation provides no indication that processing is happening. Users may think the upload failed and try again, or navigate away before processing completes.

Scope

• Add a loading state to the CSV upload flow with a progress indicator
• Add a timeout for the file.text() call (10 seconds max)
• Show row count feedback as the CSV is parsed ("Processing 5,000 recipients...")
• Add a cancel button to abort long-running CSV processing
• Validate CSV structure (headers, column count) before processing all rows
• Show specific error messages for common CSV issues (wrong delimiter, missing columns)

Implementation Guidelines

• Wrap file.text() with Promise.race() against a timeout promise
• Add a processingState to the upload component: 'idle' | 'reading' | 'parsing' | 'validating' | 'complete' | 'error'
• Show a progress bar or spinner during the reading and parsing phases
• Parse the CSV header row first and validate column names before processing data rows
• For very large files, consider using a streaming parser or Web Worker to avoid blocking the main thread
• Use the existing FileUploadArea.tsx component for the UI updates

Acceptance Criteria

• A loading spinner/progress indicator shows during CSV processing
• Files approaching 1MB show "Processing X recipients..." feedback
• A 10-second timeout prevents indefinite hangs on malformed files
• Users can cancel CSV processing mid-way
• CSV header validation catches wrong column names before processing rows
• Specific error messages for: wrong delimiter, missing required columns, empty file
• Successfully processed CSV shows "X recipients loaded" confirmation
• The upload area is disabled during processing (no duplicate uploads)

Getting Started

1. Read src/utils/csv-processing.ts — understand the current parsing flow
2. Read src/components/molecules/FileUploadArea.tsx — understand the upload UI
3. Add timeout wrapper: Promise.race([file.text(), timeoutPromise(10000)])
4. Add processingState to the upload component
5. Add header validation before processing data rows
6. Add progress feedback UI (spinner + row count)
7. Test with: empty file, 10-row file, 1000-row file, malformed CSV, wrong delimiter

---

PR Submission Guide

This section applies to every PR for this issue. Follow it exactly.

Before You Start

• Fork the repository first if you haven't already — all contributions must come from a fork
• Pull the latest main branch: git checkout main && git pull origin main
• Create your feature branch from main: git checkout -b feat/<issue-number>-csv-processing-feedback

While Working

• Make atomic commits — one concern per commit, each commit must build
• Use Conventional Commits: feat(scope): description, fix(scope): description
• Keep your branch up to date: git pull origin main --rebase regularly

Before Submitting the PR

• Pull latest main and rebase: git checkout main && git pull origin main && git checkout <your-branch> && git rebase main
• Ensure the build passes: pnpm build
• Ensure linting passes: pnpm lint
• Record a screen recording of your implementation showing the feature/fix working in the browser. Attach it to the PR.

PR Requirements

• Link this issue in your PR description using Closes #<issue-number>
• Fill out the full PR template — Summary, What Was Implemented, Implementation Details, How to Test
• Attach your screen recording demonstrating the implementation
• Request a review from a maintainer

PRs without a screen recording or without a linked issue will not be reviewed. Failure to meet PR requirements may lead to PR rejection.

[flavor365]

@flavor365 has applied to work on this issue as part of the Stellar Wave Program's 3rd wave.

Hi I'm a software dev, may I handle this issue?

ℹ️ Repo Maintainers: To accept this application, review their application or assign @flavor365 to this issue.

[Tiikeih1]

@Tiikeih1 has applied to work on this issue as part of the Stellar Wave Program's 3rd wave.

i would love to work on this issue

ℹ️ Repo Maintainers: To accept this application, review their application or assign @Tiikeih1 to this issue.

[israelolrunfemi]

@israelolrunfemi has applied to work on this issue as part of the Stellar Wave Program's 3rd wave.

I'm well grounded in building scalable applications

ℹ️ Repo Maintainers: To accept this application, review their application or assign @israelolrunfemi to this issue.

[AbuTuraab]

@AbuTuraab has applied to work on this issue as part of the Stellar Wave Program's 3rd wave.

Hi,

I’d like to request assignment to this issue.

As a full-stack developer working actively in the Stellar ecosystem, I understand how important robust automation is for projects that combine Soroban smart contracts, backend services, and frontend applications. A reliable CI/CD pipeline is the backbone of safe contract development, deterministic builds, and predictable testnet releases.

During the previous waves of contributions, I worked on several Stellar-related repos where I resolved issues such as:
Frontend implementations.
Misconfigured GitHub Actions leading to failing builds
Missing or incomplete Soroban contract test pipelines
Frontend pipelines that didn’t catch build/lint errors
Inefficient caching (Rust, pnpm) that slowed down CI
Incorrect workflow permissions affecting deployment and artifact uploads
These issues helped me develop a strong sense of what healthy CI/CD should look like for blockchain projects.

Relevant Skills
Full-stack expertise with Soroban, Rust, TypeScript, and modern frontend tooling
Strong experience designing and maintaining GitHub Actions workflows
Familiar with contract testing, reproducible builds, and blockchain dev best practices
Experience with pnpm-based frontend CI pipelines (install, lint, type-check, build)
Comfortable implementing secure deployment flows, secret management, and workflow permission hardening
Confident in making pipelines faster and more reliable using smart caching strategies

ℹ️ Repo Maintainers: To accept this application, review their application or assign @AbuTuraab to this issue.

[drips-wave]

Congratulations, @Tiikeih1! 🎉 Your application was accepted by the repo's maintainers, and the issue is due on March 30, 2026.

🧑‍💻 @Tiikeih1: Please resolve the issue such that the repo's maintainers have enough time to review your contribution before the due date. You'll earn Points for completing the issue on-time, which will make you eligible for a share of the Stellar Wave Program's reward pool.

Warning

When opening a PR, please link it to this issue to ensure it gets tracked accurately. Points are awarded when this issue is marked as completed by the maintainer.

🤠 Repo maintainers: Please keep an eye on the contributor's progress and review their work before the due date. You can manage this issue, including adjusting its complexity and points, here.

🌊 Happy Wave 🌊