fix(frontend): resolve disabled export button and synchronize editor …

[Rucha0901]

📝 Summary of Changes

This pull request resolves the issue where the Export button remained disabled or locked after successfully uploading and processing valid videos, and ensures all editing parameters and export states synchronize seamlessly.

Specifically, it:

1. Added Video Loading State: Introduced a new "loading" state to ExportStatus that tracks the asynchronous metadata extraction and magic-byte checks after a video is selected.
2. Added Premium Visual Loader: Equipped FileUpload with an isLoading prop and a modern visual loader. While a video is loading, a high-quality pulsing visual is rendered rather than returning the user to the blank drop-zone, significantly improving user experience.
3. Synchronized Controls & Buttons: Modified VideoEditor to include the "loading" status in isProcessing. All controls and the Export button are appropriately disabled, displaying "PROCESSING" until the video file is completely parsed and loaded.
4. Resolved Stale Export State: Added a synchronization useEffect hook in useVideoEditor that monitors changes in the editing recipe or audio options. If the current status is "done" or "error", any new edit resets the status back to "idle" and clears out old results/error banners, preventing any stale or false disabled states.

---

🛠️ Technical Details & Files Changed

• src/lib/types.ts: Updated the ExportStatus type to include the new "loading" state.
• src/hooks/useVideoEditor.ts:
  • Set status to "loading" at the start of handleFileSelect and to "idle" when successful.
  • Added a reactive effect to clean up old export blobs, results, and errors as soon as the user makes any adjustment to the video settings after an export or failure.
• src/components/FileUpload.tsx: Created a premium visual LoadingState spinner that renders when isLoading is true.
• src/components/VideoEditor.tsx: Passed the loading status to FileUpload and integrated the "loading" state to safely disable editor controls and update the Export button.

---

🧪 Verification & Testing

1. TypeScript Compilation: Checked by running npx tsc --noEmit and confirmed zero type check or compiler errors.
2. Unit Tests: Ran the Vitest test suites using npx vitest run and ensured all existing unit tests pass successfully.
3. Manual Flow Verified:
   • Selecting a video correctly renders the premium loading animation instead of resetting the drop-zone.
   • The Export button correctly toggles to "PROCESSING" and becomes fully enabled as "EXPORT" as soon as the video metadata extraction succeeds.
   • Adjusting any trim, preset, or quality slider after a completed export successfully clears the old download box and resets the state to "idle".

---

☑️ Checklist

• My code compiles successfully with no TypeScript errors
• I have tested the changes locally and verified they work as expected
• All unit tests pass successfully
• I have verified the changes on multiple file formats

[vercel]

@Rucha0901 is attempting to deploy a commit to the magic-peach1's projects Team on Vercel.

A member of the Team first needs to authorize it.

[github-actions]

👋 Thanks for your PR, @Rucha0901!

Welcome to Reframe — a browser-based video editor built for everyone 🎬

What happens next

1. 🤖 Automated checks — build & TypeScript typecheck will run automatically
2. ✅ Vercel preview — a preview deployment will be created (requires maintainer authorization for fork PRs)
3. 👀 Code review — a maintainer will review your changes
4. 🚀 Merge — once approved, your PR will be merged!

Quick checklist

• PR title follows Conventional Commits (e.g. feat: add dark mode)
• Linked the issue this PR closes (e.g. Closes #123)
• Tested the changes locally (bun run dev)
• Build passes (bun run build)

Useful links

• 📖 CONTRIBUTING.md
• 🐛 Open Issues
• ⭐ Star the repo to support the project!

Happy coding! 🎉

[github-actions]

⚠️ PR Format Issues — @Rucha0901

Please fix the following before your PR can be reviewed:

• ⚠️ No linked issue found. Add Closes #<issue-number> to your PR description.

Push new commits after fixing — this comment will update automatically.

📖 CONTRIBUTING.md