Design: Upload Progress Bar/Buffer Wheel

src/app/api/upload/route.ts

@@ -35,7 +35,13 @@ type SchoolCoordinateData = {
     long: number | null;
 };
 
+let currentProgress = {
+    progress: 0,
+    complete: false,
+};
+
 export async function POST(req: NextRequest) {
+    currentProgress = { progress: 0, complete: false };
     try {
         const jsonReq = await req.json();
         const year: number = jsonReq.formYear;
@@ -111,8 +117,9 @@ export async function POST(req: NextRequest) {
             .delete(yearlyTeacherParticipation)
             .where(eq(yearlyTeacherParticipation.year, year));
 
-        let insertedCount = 0;
-        for (const row of filteredRows) {
+        const total = filteredRows.length;
+        for (let i = 0; i < filteredRows.length; i++) {
+            const row = filteredRows[i];
             // Find or create school using schoolId
             const schoolIdValue = String(row[COLUMN_INDICES.schoolId]);
             let school = await db.query.schools.findFirst({
@@ -245,11 +252,14 @@ export async function POST(req: NextRequest) {
                 });
             }
 
-            insertedCount++;
+            currentProgress.progress = Math.round(((i + 1) / total) * 100);
+            currentProgress.complete = false;
         }
+        currentProgress.progress = 100;
+        currentProgress.complete = true;
 
         return NextResponse.json(
-            { message: "Upload successful", rowsProcessed: insertedCount },
+            { message: "Upload started" },
             { status: 200 },
         );
     } catch (error) {
@@ -259,3 +269,42 @@ export async function POST(req: NextRequest) {
         );
     }
 }
+
+export async function GET() {
+    let interval: NodeJS.Timeout;
+
+    const stream = new ReadableStream({
+        start(controller) {
+            interval = setInterval(() => {
+                try {
+                    // Only enqueue if not complete
+                    if (!currentProgress.complete) {
+                        controller.enqueue(
+                            `data: ${JSON.stringify(currentProgress)}\n\n`,
+                        );
+                    } else {
+                        controller.enqueue(
+                            `data: ${JSON.stringify(currentProgress)}\n\n`,
+                        );
+                        clearInterval(interval);
+                        controller.close();
+                    }
+                } catch (err) {
+                    clearInterval(interval);
+                    controller.close();
+                }
+            }, 500);
+        },
+        cancel() {
+            clearInterval(interval);
+        },
+    });
+
+    return new Response(stream, {
+        headers: {
+            "Content-Type": "text/event-stream",
+            "Cache-Control": "no-cache",
+            "Connection": "keep-alive",
+        },
+    });
+}

src/components/SpreadsheetState.tsx

@@ -71,6 +71,7 @@ export default function SpreadsheetState() {
         Map<string, { lat: number; long: number }>
     >(new Map());
     const [currentSchoolIndex, setCurrentSchoolIndex] = useState(0);
+    const [progress, setProgress] = useState<number>(0);
 
     // Handler for when a school location is assigned via the map
     const handleSchoolLocationAssigned = useCallback(
@@ -264,6 +265,14 @@ export default function SpreadsheetState() {
         }
 
         try {
+            const source = new EventSource("/api/upload");
+            source.onmessage = (event) => {
+                const data = JSON.parse(event.data);
+                setProgress(data.progress);
+                if (data.complete) {
+                    source.close();
+                }
+            };
             const response = await fetch("/api/upload", {
                 method: "POST",
                 headers: {
@@ -499,7 +508,21 @@ export default function SpreadsheetState() {
             </div>
 
             <div className={`flex-1 ${tabIndex === 2 ? "w-full" : ""}`}>
-                {tab}
+                {isSubmitting ? (
+                    <div className="flex flex-col items-center gap-4 mt-8 w-full max-w-md">
+                        <div className="w-full bg-gray-200 rounded-full h-4">
+                            <div
+                                className="bg-primary h-4 rounded-full transition-all duration-300"
+                                style={{ width: `${progress}%` }}
+                            />
+                        </div>
+                        <p className="text-sm text-muted-foreground">
+                            Progress: ({progress}%)
+                        </p>
+                    </div>
+                ) : (
+                    tab
+                )}
             </div>
 
             <div