Merge pull request #107 from DevloperAmanSingh/feature/progress-bar

Feature: Add progress indicator for large file imports

1 files changed, 14 insertions, 1 deletions

diff --git a/apps/web/src/lib/media-processing.ts b/apps/web/src/lib/media-processing.ts
index d241f411..daf22b34 100644
--- a/apps/web/src/lib/media-processing.ts
+++ b/apps/web/src/lib/media-processing.ts
@@ -11,11 +11,15 @@ import {
 export interface ProcessedMediaItem extends Omit<MediaItem, "id"> {}

 

 export async function processMediaFiles(

-  files: FileList | File[]

+  files: FileList | File[],

+  onProgress?: (progress: number) => void

 ): Promise<ProcessedMediaItem[]> {

   const fileArray = Array.from(files);

   const processedItems: ProcessedMediaItem[] = [];

 

+  const total = fileArray.length;

+  let completed = 0;

+

   for (const file of fileArray) {

     const fileType = getFileType(file);

 

@@ -57,6 +61,15 @@ export async function processMediaFiles(
         duration,

         aspectRatio,

       });

+

+      // Yield back to the event loop to keep the UI responsive

+      await new Promise((resolve) => setTimeout(resolve, 0));

+

+      completed += 1;

+      if (onProgress) {

+        const percent = Math.round((completed / total) * 100);

+        onProgress(percent);

+      }

     } catch (error) {

       console.error("Error processing file:", file.name, error);

       toast.error(`Failed to process ${file.name}`);