From 0a333834a35a2203927195585aa1b35ebd271d2d Mon Sep 17 00:00:00 2001
From: Collin Bolles <collinbolles@gmail.com>
Date: Mon, 30 Jun 2025 21:21:33 -0400
Subject: [PATCH] Add loading progress circle

---
 .../task/TaskRecording.component.tsx          | 31 ++++++++++++++-----
 1 file changed, 24 insertions(+), 7 deletions(-)

diff --git a/packages/frontend/src/components/task/TaskRecording.component.tsx b/packages/frontend/src/components/task/TaskRecording.component.tsx
index 131b9ad..af56874 100644
--- a/packages/frontend/src/components/task/TaskRecording.component.tsx
+++ b/packages/frontend/src/components/task/TaskRecording.component.tsx
@@ -1,5 +1,5 @@
-import { Grid } from '@mui/material';
-import { FC } from 'react';
+import { CircularProgress, Grid, Stack, Typography } from '@mui/material';
+import { FC, useState } from 'react';
 import { VideoRecord } from '../VideoRecord.component';
 import { TaskInstructionsSide } from './TaskInstructionsSide.component';
 import {
@@ -19,6 +19,7 @@ export interface TaskRecordingProps {
 export const TaskRecording: FC<TaskRecordingProps> = ({ task }) => {
   const navigate = useNavigate();
   const { user } = useUser();
+  const [loading, setIsLoading] = useState<boolean>(false);
 
   const handleVideoComplete = async (_blobURL: string, blob: Blob) => {
     // Get link to upload the video
@@ -68,11 +69,18 @@ export const TaskRecording: FC<TaskRecordingProps> = ({ task }) => {
   return (
     <Grid container direction="row" sx={{ padding: 5 }}>
       <Grid size={6}>
-        <VideoRecord
-          downloadRecording={false}
-          onSubmit={(blobURL, blob) => handleVideoComplete(blobURL, blob)}
-          timeLimit={task.timeSeconds}
-        />
+        {loading ? (
+          <UploadingLoader />
+        ) : (
+          <VideoRecord
+            downloadRecording={false}
+            onSubmit={(blobURL, blob) => {
+              setIsLoading(true);
+              handleVideoComplete(blobURL, blob);
+            }}
+            timeLimit={task.timeSeconds}
+          />
+        )}
       </Grid>
       <Grid size={6}>
         <TaskInstructionsSide task={task} />
@@ -80,3 +88,12 @@ export const TaskRecording: FC<TaskRecordingProps> = ({ task }) => {
     </Grid>
   );
 };
+
+const UploadingLoader: FC = () => {
+  return (
+    <Stack direction="column" alignItems="center" spacing={2}>
+      <Typography variant="body1">Uploading, do not refresh</Typography>
+      <CircularProgress />
+    </Stack>
+  );
+};